纯CSS3实现动态火车行驶特效

上次开完飞机，这次开火车

查看效果：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