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

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

更多特效：http://www.cnblogs.com/roucheng/p/texiao.html

纯CSS3实现动态火车行驶特效的更多相关文章

  1. 纯css3 加载loading动画特效

    最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...

  2. 纯css3实现的文字亮光特效

    今天给大家分享一款纯css3实现的文字亮光特效.这款特效文字上一道亮光逐渐扫过文字.效果非常漂亮.一起看下效果: 在线预览   源码下载 实现的代码. html代码: <span class=& ...

  3. 2014圣诞节一款纯css3实现的雪人动画特效

    在2014年的圣诞节,爱编程小编给大家分分享一款纯css3实现的雪人动画特效.该实例实现一个雪人跳动的特效,效果图如下: 在线预览   源码下载 实现的代码. html代码: <span cla ...

  4. 纯CSS3实现动态导航栏目

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 纯CSS3绘制神奇宝贝伊布动画特效

    在线演示       本地下载

  6. 一款纯css3实现的发光屏幕旋转特效

    今天给大家带来一款纯css3实现的发光屏幕旋转特效.该屏幕由纯css3实现带发光旋转特效,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="s ...

  7. 纯CSS3实现多层云彩变换飞行动画

    查看效果:http://hovertree.com/texiao/css3/4/效果2 效果图: 代码如下: <!doctype html> <html lang="zh& ...

  8. 8个超炫酷的纯CSS3动画及源码分享

    在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页.本文要分享8个超炫酷的纯CSS3 ...

  9. CSS3圆环动态弹出菜单

    体验效果:http://hovertree.com/texiao/css3/44/ 代码如下: <!DOCTYPE html> <html lang="zh"&g ...

随机推荐

  1. IIS Community Newsletter June 2013

    Announcements Windows 2012 Server R2 preview released Windows Server 2012 R2 provides a wide range o ...

  2. Net作业调度(一) -Quartz.Net入门

    背景 很多时候,项目需要在不同时刻,执行一个或很多个不同的作业. Windows执行计划这时并不能很好的满足需求了,迫切需要一个更为强大,方便管理,集群部署的作业调度框架. 介绍 Quartz一个开源 ...

  3. 关于新书《修炼之道：.NET开发要点精讲》的各种说明

    索引 新书介绍 新书封面 新书目录 试读章节 原稿试读 网购地址 规格参数 反馈方式 一些感谢 附加说明 1.新书介绍 从2013年年底到2014年9月,历时将近10个月,这本书终于看到了“出版发行” ...

  4. .NET实现微博粉丝服务平台接口

    [文章摘要]Senparc.Weixin.MP虽然是微信公众号的SDK,但由于易信公众号和新浪微博粉丝服务平台也提供了微信兼容接口,所以也可以使用其快速实现相应的服务,当然微博由于与微信存在差异,如果 ...

  5. 代码提交的时候可以插入表情了-GitHub表情的使用

    GitHub官方有个表情项目,旨在丰富文字信息.意味着你可以在提交代码的时候,在提交信息里面添加表情,同时也可以在项目的ReadMe.md文件里面使用表情.除此之外,当然还有项目在GitHub上的wi ...

  6. PHP钩子机制

    什么是钩子 大家想必听过插件,wordpress插件特别多,这个就是用钩子机制实现的. 当代码在运行的过程中,我们预先在运行的几个特殊点里执行一些特殊方法:例如在运行方法(例如Blog::add的ad ...

  7. 单节点部署Hadoop教程

    搭建HDFS 增加主机名 我这里仅仅增加了master主机名 [root@10 /xinghl/hadoop/bin]$ cat /etc/hosts 127.0.0.1 localhost 10.0 ...

  8. bootstrap-material-design-个人总结

    bootstrap-material-design-个人总结: 所需框架:1.boostrapt 3.0+2.jQuery 1.9.1+ 项目目录:Material/├── css/│ ├── boo ...

  9. Leetcode-463 Island Perimeter

    #463. Island Perimeter You are given a map in form of a two-dimensional integer grid where 1 represe ...

  10. 重温 w3cshool css3

    border-radius: 2em 1em 4em / 0.5em 3em;  兼容性IE9+.Firefox 4+.Chrome.Safari 5+ 以及 Opera 支持 border-radi ...