css3做的迷宫
2015-10-23 10:13
471 查看
<!DOCTYPE HTML>
<html lang=zh-cn>
<head>
<meta charset=utf-8>
<title>css3实现的迷宫游戏</title>
<style>
*{margin:0px;padding:0px;}
body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000;}
.tips{padding:15px;line-height:24px;}
#outer {width:330px; height:330px; position:relative; background:#ddd; margin:50px auto 100px auto; border:2px solid #000;}
#holder {padding:30px 0 0 0; list-style-type:none; width:330px; height:300px; margin:0;}
#holder li {display:block; width:30px; height:30px; background:#c00; margin-left:30px; margin-bottom:30px; float:left;}
#holder a {display:block; width:30px; height:30px; position:absolute; background:#c00; z-index:10;}
#holder a span {display:block; width:30px; height:30px; background:#c00; position:absolute; left:0; top:0; z-index:10;}
a#in {left:150px; top:300px; background:#000;}
.h1 {width:30px; height:30px; position:absolute; background:#bb7; top:0; left:30px;}
.h2 {width:90px; height:30px; position:absolute; background:#bb7; top:0; left:30px;}
.h3 {width:150px; height:30px; position:absolute; background:#bb7; top:0; left:30px;}
.h4 {width:210px; height:30px; position:absolute; background:#bb7; top:0; left:30px;}
.lft1 {left:-30px;}
.lft2 {left:-90px;}
.lft3 {left:-150px;}
.lft4 {left:-210px;}
#holder a span {background:#eee url("http://www.webdm.cn/images/20130407/path.gif");}
#holder a#c3 {background:#eee url("http://www.webdm.cn/images/20130407/grass.gif"); text-align:center;}
#holder a#c3 span {display:none; background:#eee url("http://www.webdm.cn/images/20130407/grass.gif");}
.v1 {width:30px; height:30px; position:absolute; background:#bb7; left:0; top:30px;}
.v2 {width:30px; height:90px; position:absolute; background:#bb7; left:0; top:30px;}
.v3 {width:30px; height:150px; position:absolute; background:#bb7; left:0; top:30px;}
.v4 {width:30px; height:210px; position:absolute; background:#bb7; left:0; top:30px;}
.up1 {top:-30px;}
.up2 {top:-90px;}
.up3 {top:-150px;}
.up4 {top:-210px;}
#holder a em, #holder a:visited em {visibility:hidden; background:#ede;z-index:100;}
#holder a:hover {width:0; height:0; background:#ddd; z-index:100;}
#holder a:hover span {background:#c00 url("http://www.webdm.cn/images/20130407/path.gif"); z-index:100; cursor:move;}
#holder a:hover em {visibility:visible; background:#bb7 url("http://www.webdm.cn/images/20130407/path2.gif"); z-index:100; cursor:pointer;}
#holder a:active {width:0; height:0;}
a#failed {position:absolute; left:0; top:0; width:310px; height:310px; background:#fff url("http://www.webdm.cn/images/20130407/mud.gif"); z-index:10; text-align:center;padding:10px;line-height:32px;}
a#failed span {display:none;}
a#failed:hover {background:#000 url("http://www.webdm.cn/images/20130407/mud.gif"); z-index:200; text-decoration:none;}
a#failed:hover span {display:block; background:transparent; font-size:20px; color:#fff; margin-top:75px;}
a#way-in {position:absolute; left:150px; top:300px; width:30px; height:30px; background:#fff url("http://www.webdm.cn/images/20130407/path.gif"); z-index:10;}
#holder a#c3:hover {position:absolute; top:0; left:0; width:330px; height:330px; text-align:center;}
#holder a#c3:hover span {display:block; background:#eee url("http://www.webdm.cn/images/20130407/grass.gif"); font-size:20px; color:#000;}
#holder a#c3:hover span em {font-style:normal; width:330px; position:absolute; top:0; left:0; display:block; background:transparent; font-size:20px; color:#000; margin-top:75px;}
</style>
</head>
<body>
<div id="outer">
<a id="failed" href="#nogo">
<span>您没有走到中间的路土地，而是埋在了泥土中!!<br><br>请在尝试一次.</span>
</a>
<ul id="holder">
<li><a href="#nogo" id="a1"><span></span><em class="h2"></em><em class="v2"></em></a></li>
<li><a href="#nogo" id="a2"><span></span><em class="h2"></em><em class="v2"></em></a></li>
<li><a href="#nogo" id="a3"><span></span><em class="v4"></em></a></li>
<li><a href="#nogo" id="a4"><span></span><em class="h1"></em><em class="h1 lft1"></em><em class="v1"></em></a></li>
<li><a href="#nogo" id="a5"><span></span><em class="h3 lft3"></em><em class="v3"></em></a></li>
<li><a href="#nogo" id="b1"><span></span><em class="h3"></em><em class="v3"></em></a></li>
<li><a href="#nogo" id="b2"><span></span><em class="h3"></em><em class="v3"></em></a></li>
<li><a href="#nogo" id="b3"><span></span><em class="h1"></em><em class="h1 lft1"></em><em class="v1"></em><em class="v1 up1"></em></a></li>
<li><a href="#nogo" id="b4"><span></span><em class="h3 lft3"></em><em class="v3"></em></a></li>
<li><a href="#nogo" id="b5"><span></span><em class="h2 lft2"></em><em class="v2"></em></a></li>
<li><a href="#nogo" id="c1"><span></span><em class="h1"></em><em class="v1 up1"></em><em class="v1"></em></a></li>
<li><a href="#nogo" id="c2"><span></span><em class="h2"></em><em class="v2 up2"></em><em class="v2"></em></a></li>
<li><a href="#nogo" id="c3"><span><em>恭喜!!!<br>您进入到绿草地.<br><br>但是只走11步您可以走到绿藻地吗?</em></span></a></li>
<li><a href="#nogo" id="c4"><span></span><em class="h2 lft2"></em><em class="v2 up2"></em><em class="v2"></em><em class="v1"></em></a></li>
<li><a href="#nogo" id="c5"><span></span><em class="h3 lft3"></em></a></li>
<li><a href="#nogo" id="d1"><span></span><em class="h3"></em><em class="v3 up3"></em></a></li>
<li><a href="#nogo" id="d2"><span></span><em class="h2"></em><em class="v2 up2"></em></a></li>
<li><a href="#nogo" id="d3"><span></span><em class="v3 up3"></em></a></li>
<li><a href="#nogo" id="d4"><span></span><em class="h2 lft2"></em><em class="v2 up2"></em></a></li>
<li><a href="#nogo" id="d5"><span></span><em class="h4 lft4"></em></a></li>
<li><a href="#nogo" id="e1"><span></span><em class="h4"></em><em class="v4 up4"></em></a></li>
<li><a href="#nogo" id="e2"><span></span><em class="h2"></em><em class="v2 up2"></em></a></li>
<li><a href="#nogo" id="e3"><span></span><em class="h1"></em><em class="h1 lft1"></em><em class="v1 up1"></em></a></li>
<li><a href="#nogo" id="e4"><span></span><em class="h3 lft3"></em><em class="v3 up3"></em></a></li>
<li><a href="#nogo" id="e5"><span></span><em class="h2 lft2"></em><em class="v2 up2"></em></a></li>
</ul> <!-- end of holder -->
<a id="way-in" href="#nogo"></a>
</div>
</body>
</html>运行结果：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS旋转图片
- css定义select样式
- 自定义 进度条 样式
- 让ie6,7,8支持css3属性
- CSS学习笔记
- CSS学习笔记
- CSS布局模型
- CSS/CSS3 如何实现元素水平居中
- CSS/CSS3 如何实现元素水平居中
- CSS命名规则
- CSS选择器的权重与优先规则
- CSS RESET(让所有的浏览器站在同一条线上)
- CSS Display(显示) 与 Visibility（可见性）
- 音乐小转盘 css3 动画
- css3转盘抽奖示例-转底盘
- CSS中position属性( absolute | relative | static | fixed )详解
- css3转盘抽奖示例-转指针
- DIV横向排列_CSS如何让多个div盒子并排同行显示
- CSS:透明度 opacity与rgba()的区别
- css购物车样式