css3迷宫游戏，在做技术的过程中，我遇到的了很多难题，曾就纠结过。这个琐碎的过程就像下面的css3小游戏。我想走到中间的绿草地，但是过程中有许多的三岔口让我选择，很是迷茫。游戏从底部中心试者向中间的路草地移动。走到中间绿草地就成功完成游戏！您从路径上掉下来，陷入泥土中，此次游戏结束！每个节点可能有1个、2个、3个不同方向的路让你选择！
<!DOCTYPE HTML> <html lang=zh-cn> <head> <meta charset=utf-8> <title>张力仪</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("/jscss/demoimg/201209/path.gif");} #holder a#c3 {background:#eee url("/jscss/demoimg/201209/grass.gif"); text-align:center;} #holder a#c3 span {display:none; background:#eee url("/jscss/demoimg/201209/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("/jscss/demoimg/201209/path.gif"); z-index:100; cursor:move;} #holder a:hover em {visibility:visible; background:#bb7 url("/jscss/demoimg/201209/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("/jscss/demoimg/201209/mud.gif"); z-index:10; text-align:center;padding:10px;line-height:32px;} a#failed span {display:none;} a#failed:hover {background:#000 url("/jscss/demoimg/201209/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("/jscss/demoimg/201209/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("/jscss/demoimg/201209/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> <!--[if lte IE 7]> <style> #holder li {display:inline;} </style> <![endif]--> </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>
CSS3练习：css3迷宫游戏
时间： 2024-10-21 11:51:30