CSS3练习：css3迷宫游戏

2020-01-27 14:17:14

字体：大中小

来源：转载

供稿：网友

css3迷宫游戏，在做技术的过程中，我遇到的了很多难题，曾就纠结过。这个琐碎的过程就像下面的css3小游戏。我想走到中间的绿草地，但是过程中有许多的三岔口让我选择，很是迷茫。游戏从底部中心试者向中间的路草地移动。走到中间绿草地就成功完成游戏！您从路径上掉下来，陷入泥土中，此次游戏结束！每个节点可能有1个、2个、3个不同方向的路让你选择！

<!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("/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></head><body><div id="outer">	<a id="failed" href="#nogo">		您没有走到中间的路土地，而是埋在了泥土中!! 请在尝试一次.	</a>	<ul id="holder">		<li><a href="#nogo" id="a1"></a></li>		<li><a href="#nogo" id="a2"></a></li>		<li><a href="#nogo" id="a3"></a></li>		<li><a href="#nogo" id="a4"></a></li>		<li><a href="#nogo" id="a5"></a></li>		<li><a href="#nogo" id="b1"></a></li>		<li><a href="#nogo" id="b2"></a></li>		<li><a href="#nogo" id="b3"></a></li>		<li><a href="#nogo" id="b4"></a></li>		<li><a href="#nogo" id="b5"></a></li>		<li><a href="#nogo" id="c1"></a></li>		<li><a href="#nogo" id="c2"></a></li>		<li><a href="#nogo" id="c3">恭喜!!! 您进入到绿草地. 但是只走11步您可以走到绿藻地吗?</a></li>		<li><a href="#nogo" id="c4"></a></li>		<li><a href="#nogo" id="c5"></a></li>		<li><a href="#nogo" id="d1"></a></li>		<li><a href="#nogo" id="d2"></a></li>		<li><a href="#nogo" id="d3"></a></li>		<li><a href="#nogo" id="d4"></a></li>		<li><a href="#nogo" id="d5"></a></li>		<li><a href="#nogo" id="e1"></a></li>		<li><a href="#nogo" id="e2"></a></li>		<li><a href="#nogo" id="e3"></a></li>		<li><a href="#nogo" id="e4"></a></li>		<li><a href="#nogo" id="e5"></a></li>	</ul> 	<a id="way-in" href="#nogo"></a></div></body></html>

上一篇：CSS3编写一个带阴影的Logo效果

下一篇：CSS3 3D旋转立方体