CSS3練習：css3迷宮游戲

2024-09-05 12:17:18

字體：大中小

來源：轉載

供稿：網友

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 class="iwvjtn8m0" id="outer">			您沒有走到中間的路土地，而是埋在了泥土中!! 請在嘗試一次.		<ul id="holder">		<li></li>		<li></li>		<li></li>		<li></li>		<li></li>		<li></li>		<li></li>		<li></li>		<li></li>		<li></li>		<li></li>		<li></li>		<li>恭喜!!! 您進入到綠草地. 但是只走11步您可以走到綠藻地嗎?</li>		<li></li>		<li></li>		<li></li>		<li></li>		<li></li>		<li></li>		<li></li>		<li></li>		<li></li>		<li></li>		<li></li>		<li></li>	</ul> 	</div></body></html>

上一篇：CSS3 3D旋轉立方體

下一篇：CSS3編寫一個帶陰影的Logo效果