CSS生成的迷宫

来源：互联网发布：nginx配置访问根目录编辑：程序博客网时间：2024/04/30 09:06

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>站长中心-CSS迷宫</title>

body{background:#333;color:#fff;}

.maze{

width:110px;

height:120px;

background:url(images/m4.png) no-repeat 0 -20px;

position:relative;

margin:20px auto;

border:3px solid red;

}

.maze a{

width:10px;

height:10px;

position:absolute;

top:0;

left:0;

z-index:99;

}

.maze a:hover{

background:#fff url(images/m4.png) no-repeat 0 0;

position:absolute;

left:0!important;

top:0!important;

width:110px;

height:120px;

z-index:1;

}

.maze .a a{top:0;}

.maze .b a{top:10px;}

.maze .c a{top:20px;}

.maze .d a{top:30px;}

.maze .e a{top:40px;}

.maze .f a{top:50px;}

.maze .g a{top:60px;}

.maze .h a{top:70px;}

.maze .i a{top:80px;}

.maze .j a{top:90px;}

.maze .k a{top:100px;}

.maze .l a{top:110px;}

.maze a.a1{left:0}

.maze a.a2{left:10px}

.maze a.a3{left:20px}

.maze a.a4{left:30px;}

.maze a.a5{left:40px;}

.maze a.a6{left:50px}

.maze a.a7{left:60px;}

.maze a.a8{left:70px;}

.maze a.a9{left:80px;}

.maze a.a10{left:90px}

.maze a.a11{left:100px}

.maze a.a1:hover{background-position:0 0}

.maze a.a2:hover{background-position:-10px 0}

.maze a.a3:hover{background-position:-20px 0}

.maze a.a4:hover{background-position:-30px 0}

.maze a.a5:hover{background-position:-40px 0}

.maze a.a6:hover{background-position:-50px 0}

.maze a.a7:hover{background-position:-60px 0}

.maze a.a8:hover{background-position:-70px 0}

.maze a.a9:hover{background-position:-80px 0}

.maze a.a10:hover{background-position:-90px 0}

.maze a.a11:hover{background-position:-100px 0}

.maze .b a.a1:hover{background-position:0 20px}

.maze .b a.a2:hover{background-position:-10px 20px}

.maze .b a.a3:hover{background-position:-20px 20px}

.maze .b a.a4:hover{background-position:-30px 20px}

.maze .b a.a5:hover{background-position:-40px 20px}

.maze .b a.a6:hover{background-position:-50px 20px}

.maze .b a.a7:hover{background-position:-60px 20px}

.maze .b a.a8:hover{background-position:-70px 20px}

.maze .b a.a9:hover{background-position:-80px 20px}

.maze .b a.a10:hover{background-position:-90px 20px}

.maze .b a.a11:hover{background-position:-100px 20px}

.maze .c a.a1:hover{background-position:0 10px}

.maze .c a.a2:hover{background-position:-10px 10px}

.maze .c a.a3:hover{background-position:-20px 10px}

.maze .c a.a4:hover{background-position:-30px 10px}

.maze .c a.a5:hover{background-position:-40px 10px}

.maze .c a.a6:hover{background-position:-50px 10px}

.maze .c a.a7:hover{background-position:-60px 10px}

.maze .c a.a8:hover{background-position:-70px 10px}

.maze .c a.a9:hover{background-position:-80px 10px}

.maze .c a.a10:hover{background-position:-90px 10px}

.maze .c a.a11:hover{background-position:-100px 10px}

.maze .d a.a1:hover{background-position:0 0px}

.maze .d a.a2:hover{background-position:-10px 0}

.maze .d a.a3:hover{background-position:-20px 0}

.maze .d a.a4:hover{background-position:-30px 0}

.maze .d a.a5:hover{background-position:-40px 0}

.maze .d a.a6:hover{background-position:-50px 0}

.maze .d a.a7:hover{background-position:-60px 0}

.maze .d a.a8:hover{background-position:-70px 0}

.maze .d a.a9:hover{background-position:-80px 0}

.maze .d a.a10:hover{background-position:-90px 0}

.maze .d a.a11:hover{background-position:-100px 0}

.maze .e a.a1:hover{background-position:0 -10px}

.maze .e a.a2:hover{background-position:-10px -10px}

.maze .e a.a3:hover{background-position:-20px -10px}

.maze .e a.a4:hover{background-position:-30px -10px}

.maze .e a.a5:hover{background-position:-40px -10px}

.maze .e a.a6:hover{background-position:-50px -10px}

.maze .e a.a7:hover{background-position:-60px -10px}

.maze .e a.a8:hover{background-position:-70px -10px}

.maze .e a.a9:hover{background-position:-80px -10px}

.maze .e a.a10:hover{background-position:-90px -10px}

.maze .e a.a11:hover{background-position:-100px -10px}

.maze .f a.a1:hover{background-position:0 -20px}

.maze .f a.a2:hover{background-position:-10px -20px}

.maze .f a.a3:hover{background-position:-20px -20px}

.maze .f a.a4:hover{background-position:-30px -20px}

.maze .f a.a5:hover{background-position:-40px -20px}

.maze .f a.a6:hover{background-position:-50px -20px}

.maze .f a.a7:hover{background-position:-60px -20px}

.maze .f a.a8:hover{background-position:-70px -20px}

.maze .f a.a9:hover{background-position:-80px -20px}

.maze .f a.a10:hover{background-position:-90px -20px}

.maze .f a.a11:hover{background-position:-100px -20px}

.maze .g a.a1:hover{background-position:0 -60px}

.maze .g a.a2:hover{background-position:-10px -30px}

.maze .g a.a3:hover{background-position:-20px -30px}

.maze .g a.a4:hover{background-position:-30px -30px}

.maze .g a.a5:hover{background-position:-40px -30px}

.maze .g a.a6:hover{background-position:-50px -30px}

.maze .g a.a7:hover{background-position:-60px -30px}

.maze .g a.a8:hover{background-position:-70px -30px}

.maze .g a.a9:hover{background-position:-80px -30px}

.maze .g a.a10:hover{background-position:-90px -30px}

.maze .g a.a11:hover{background-position:-100px -30px}

.maze .h a.a1:hover{background-position:0 -40px}

.maze .h a.a2:hover{background-position:-10px -40px}

.maze .h a.a3:hover{background-position:-20px -40px}

.maze .h a.a4:hover{background-position:-30px -40px}

.maze .h a.a5:hover{background-position:-40px -40px}

.maze .h a.a6:hover{background-position:-50px -40px}

.maze .h a.a7:hover{background-position:-60px -40px}

.maze .h a.a8:hover{background-position:-70px -40px}

.maze .h a.a9:hover{background-position:-80px -40px}

.maze .h a.a10:hover{background-position:-90px -40px}

.maze .h a.a11:hover{background-position:-100px -40px}

.maze .i a.a1:hover{background-position:0 -50px}

.maze .i a.a2:hover{background-position:-10px -50px}

.maze .i a.a3:hover{background-position:-20px -50px}

.maze .i a.a4:hover{background-position:-30px -50px}

.maze .i a.a5:hover{background-position:-40px -50px}

.maze .i a.a6:hover{background-position:-50px -50px}

.maze .i a.a7:hover{background-position:-60px -50px}

.maze .i a.a8:hover{background-position:-70px -50px}

.maze .i a.a9:hover{background-position:-80px -50px}

.maze .i a.a10:hover{background-position:-90px -50px}

.maze .i a.a11:hover{background-position:-100px -50px}

.maze .j a.a1:hover{background-position:0 -60px}

.maze .j a.a2:hover{background-position:-10px -60px}

.maze .j a.a3:hover{background-position:-20px -60px}

.maze .j a.a4:hover{background-position:-30px -60px}

.maze .j a.a5:hover{background-position:-40px -60px}

.maze .j a.a6:hover{background-position:-50px -60px}

.maze .j a.a7:hover{background-position:-60px -60px}

.maze .j a.a8:hover{background-position:-70px -60px}

.maze .j a.a9:hover{background-position:-80px -60px}

.maze .j a.a10:hover{background-position:-90px -60px}

.maze .j a.a11:hover{background-position:-100px -60px}

.maze .k a.a1:hover{background-position:0 -70px}

.maze .k a.a2:hover{background-position:-10px -70px}

.maze .k a.a3:hover{background-position:-20px -70px}

.maze .k a.a4:hover{background-position:-30px -70px}

.maze .k a.a5:hover{background-position:-40px -70px}

.maze .k a.a6:hover{background-position:-50px -70px}

.maze .k a.a7:hover{background-position:-60px -70px}

.maze .k a.a8:hover{background-position:-70px -70px}

.maze .k a.a9:hover{background-position:-80px -70px}

.maze .k a.a10:hover{background-position:-90px -70px}

.maze .k a.a11:hover{background-position:-100px -70px}

.maze .l a.a1:hover{background-position:0 -80px}

.maze .l a.a2:hover{background-position:-10px -80px}

.maze .l a.a3:hover{background-position:-20px -80px}

.maze .l a.a4:hover{background-position:-30px -80px}

.maze .l a.a5:hover{background-position:-40px -80px}

.maze .l a.a6:hover{background-position:-50px -80px}

.maze .l a.a7:hover{background-position:-60px -80px}

.maze .l a.a8:hover{background-position:-70px -80px}

.maze .l a.a9:hover{background-position:-80px -80px}

.maze .l a.a10:hover{background-position:-90px -80px}

.maze .l a.a11:hover{background-position:-100px -80px}

.maze a b{

left:-999em;

position:absolute;

top:0;

background:red;

color:#fff;

font-weight:bold;

text-align:center;

line-height:120px;

width:110px;

line-height:120px;

z-index:999;

}

.maze a:hover b{left:0!important}

.maze a.off:hover{

width:110px!important;

height:120px!important;

position:absolute!important;

top:0!!important;

left:0!important;

z-index:99;

background:#000!important;

}

.header{

width:400px;

margin:auto;

text-align:center;

}

</style>

</head>

<body>

<h1>CSS迷宫</h1>

<p>周围的黑线跟踪鼠标，直到你到达终点

没有加入这样的错误检查不作弊移动断了线

当心黑洞！</p>

</div>

</span>

</span>

</span>

</span>

</span>

</span>

/*http://www.software8.co */

</span>

</span>

</span>

</span>

</span>

</span>

</div>

</body>

</html>

站长行业门户(www.software8.co)文章，希望大家可以留言建议