上次开完飞机，这次开火车
查看效果：http://hovertree.com/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.com/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>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> 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.com target=_blank>何问起a> a href=http://hovertree.com/texiao/>特效a> a href=http://hovertree.com/h/bjaf/hovertreetrain.htm>查看代码a> a href=http://hovertree.com/texiao/css3/4/>飞机a>p>div>body>html>
转自：http://hovertree.com/h/bjaf/hovertreetrain.htm
推荐：http://hovertree.com/h/bjaf/kqud99m6.htm
更多特效：http://www.cnblogs.com/roucheng/p/texiao.html