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

查看效果：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. 又踩.NET Core的坑：在同步方法中调用异步方法Wait时发生死锁(deadlock)

    之前在将 Memcached 客户端 EnyimMemcached 迁移 .NET Core 时被这个“坑”坑的刻骨铭心(详见以下链接),当时以为只是在构造函数中调用异步方法(注:这里的异步方法都是指 ...

  2. Hybrid App移动应用开发初探

    一.移动App类型及其优缺点 1.1 Native App Native App(原生App)是用原生语言(Object-C/Java/C#/....)开发,用户需要下载安装的手机应用. 优点是 可以 ...

  3. 使用VS+VisualGDB编译调试Linux程序

    Linux程序开发变得越来越多,越来越多的程序.产品需要跨平台,甚至有些开源项目只支持Linux平台,所以掌握Linux开发变得越来越重要. 但是对于习惯了Windows下的开发,使用了VS这个宇宙第 ...

  4. SQL Server 数据库镜像

    标签:SQL SERVER/MSSQL SERVER/数据库/DBA/镜像 概述 本章内容主要讲述数据库镜像的安装,安装环境是在域环境下进行安装. 环境:SQL Server 2008 r2 企业版 ...

  5. C/C++ makefile自动生成工具(comake2,autotools,linux),希望能为开源做点微薄的贡献!

      序     在linux下C或C++项目开发,Makefile是必备的力气,但是发现手写很麻烦. 在百度有个comake2工具,用于自动生成Makefile工具,而在外边本想找一个同类工具,但发现 ...

  6. [ASP.NET MVC 小牛之路]06 - 使用 Entity Framework

    在家闲着也是闲着,继续写我的[ASP.NET MVC 小牛之路]系列吧.在该系列的上一篇博文中,在显示书本信息列表的时候,我们是在程序代码中手工造的数据.本文将演示如何在ASP.NET MVC中使用E ...

  7. 不知道张(zhāng)雱（pāng）是谁？你out了！

    张(zhāng)雱(pāng)是谁?也许你已经听说过了,也许你还没听说过呢,不过你一定听说过老刘——刘强东,没错,这二人是有关系的,什么关系,京东是老刘的,而张雱呢?张雱是京东旗下52家关联公司法人代 ...

  8. [译]libev和libevent的设计差异

    本文译自what's the difference between libev and libevent? 作者是libev作者 [问]两个库都是为异步io调度而设计,在Linux上都是使用epoll ...

  9. sublime text 下的Markdown写作

    sublime text 2(3)下的Markdown写作 什么是 Markdown wiki Markdown 是一种方便记忆.书写的纯文本标记语言,用户可以使用这些标记符号以最小的输入代价生成极富 ...

  10. EasyUI DateTimeBox设置默认时间的注意点