查看效果：http://hovertree测试数据/texiao/css3/7/
效果图：
代码如下：
DOCTYPE html >
html >
head >
meta charset ="utf-8" /> meta name ="viewport" content ="width=device-width, initial-scale=1" />
title > 纯CSS3实现动态火车行驶特效 - 何问起 title > base target ="_blank" />
link rel ="stylesheet" type ="text/css" href ="http://hovertree测试数据/texiao/css3/7/hovertreetrain.css" >
head >
body >
div > 何问起号 正在行驶中... div >
div id ="hovertreetrain" >
div id ="pipe" > div >
div id ="main-fog" > div >
div class ="alt-fog nth1" > div >
div class ="alt-fog nth2" > div >
div class ="alt-fog nth3" > div >
div class ="alt-fog nth4" > div >
div id ="front" > div >
div id ="front1" > div >
div id ="bot" >
div id ="lamp" > div >
div >
bot -->
div id ="longan" > div >
div id ="buritan" > div >
div id ="moncong" > div >
div id ="moncong-bot" > div >
div id ="room" >
div class ="hole" > div >
div class ="hole nth2" > div >
div class ="clear" > div >
div >
div id ="roof" > div >
div id ="roof2" > div >
div id ="metal" >
div class ="inner" > div >
div >
div id ="fence" >
ul >
li > li >
li > li >
li > li >
li > li >
li > li >
ul >
div >
div id ="title" >
h2 > 何问起 h2 >
欢迎乘坐何问起号列车 hovertree.com div >
div class ="foot left" > div >
div class ="foot right" > div >
div class ="stair left" >
div class ="hand left" > div >
div class ="hand right" > div >
ul >
li > li >
li > li >
li > li >
li > li >
li > li >
li > li >
li > li >
li > li >
li > li >
ul >
div class ="clear" > div >
div >
div class ="stair right" >
div class ="hand left" > div >
div class ="hand right" > div >
ul >
li > li >
li > li >
li > li >
li > li >
li > li >
li > li >
li > li >
li > li >
li > li >
ul >
div class ="clear" > div >
div >
div class ="rodaout nth1" >
div class ="inner" >
div class ="in-in" >
div class ="grid r1" > div >
div class ="grid r2" > div >
div class ="grid r3" > div >
div class ="grid r4" > div >
div class ="grid r5" > div >
div class ="grid r6" > div >
div class ="hub" > div >
div >
div >
div >
div class ="rodaout nth2" >
div class ="inner" >
div class ="in-in" >
div class ="grid r1" > div >
div class ="grid r2" > div >
div class ="grid r3" > div >
div class ="grid r4" > div >
div class ="grid r5" > div >
div class ="grid r6" > div >
div class ="hub" > div >
div >
div >
div >
div class ="rodaout nth3" >
div class ="inner" >
div class ="in-in" >
div class ="grid r1" > div >
div class ="grid r2" > div >
div class ="grid r3" > div >
div class ="grid r4" > div >
div class ="grid r5" > div >
div class ="grid r6" > div >
div class ="hub" > div >
div >
div >
div >
div class ="rodaout nth4" >
div class ="inner" >
div class ="in-in" >
div class ="grid r1" > div >
div class ="grid r2" > div >
div class ="grid r3" > div >
div class ="grid r4" > div >
div class ="grid r5" > div >
div class ="grid r6" > div >
div class ="hub" > div >
div >
div >
div >
div class ="rodaout nth5" >
div class ="inner" >
div class ="in-in" >
div class ="grid r1" > div >
div class ="grid r2" > div >
div class ="grid r3" > div >
div class ="grid r4" > div >
div class ="grid r5" > div >
div class ="grid r6" > div >
div class ="hub" > div >
div >
div >
div >
div class ="rodaout nth6" >
div class ="inner" >
div class ="in-in" >
div class ="grid r1" > div >
div class ="grid r2" > div >
div class ="grid r3" > div >
div class ="grid r4" > div >
div class ="grid r5" > div >
div class ="grid r6" > div >
div class ="hub" > div >
div >
div >
div >
div id ="grouper" >
div class ="strong nth1" > div >
div class ="strong nth2" > div >
div class ="strong nth3" > div >
div class ="strong nth4" > div >
div class ="strong nth5" > div >
div class ="end" > div >
div >
div id ="machine-box" > div >
div class ="vertical one" > div >
div class ="vertical two" > div >
ul class ="stripe-stripe one" >
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 > li >
li > li >
li > li >
li > li >
li > li >
li > li >
li > li >
li > li >
li > li >
li > li >
li > li >
ul >
ul class ="stripe-stripe two" >
li > li >
li > li >
li > li >
li > li >
li > li >
li > li >
li > li >
li > li >
ul >
div >
hovertreetrain -->
div style ="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';" >
图样图森破，无图片，无js,纯css3实现
p > 适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。 p >
p > 来源： a href ="http://hovertree测试数据" target ="_blank" > 何问起 a > a href ="http://hovertree测试数据/texiao/" > 特效 a > a href ="http://hovertree测试数据/h/bjaf/hovertreetrain.htm" > 查看代码 a > a href ="http://hovertree测试数据/texiao/css3/4/" > 飞机 a > p >
div >
body >
html >
查看更多关于纯CSS3实现动态火车行驶特效-roucheng的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did115624