Home > Article > Web Front-end > 纯CSS3实现动态火车行驶特效_html/css_WEB-ITnose
纯CSS3实现动态火车行驶特效_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:20:441484browse
上次开完飞机，这次开火车
查看效果：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><!-- 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.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
更多特效：
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：avalon2学习教程13组件使用_html/css_WEB-ITnoseNext article：js实现图片切换效果_html/css_WEB-ITnose