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

查看效果：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. ENode框架Conference案例分析系列之 - 事件溯源如何处理重构问题

    前言 本文可能对大多数不太了解ENode的朋友来说,理解起来比较费劲,这篇文章主要讲思路,而不是一上来就讲结果.我写文章,总是希望能把自己的思考过程尽量能表达出来,能让大家知道每一个设计背后的思考的东 ...

  2. 架构之路（七）MVC点滴

    我们目前正在开发中的是任务管理系统,一个前端复杂的项目,所以我们先从MVC讲起吧. WebForm 随着ASP.NET MVC的兴起,WebForm已成昨日黄花,但我其实还很想为WebForm说几句. ...

  3. Javascript分号，加还是不加？

    关于这个问题,网上已经有很多人讨论过了,我先说说自己对这个问题的回答:加!(但非必须) 有些人写代码,懒得加分号,除非是迫不得已才勉强放一个分号上去.如果你可以保证你写的代码不出现任何 bug,那当然 ...

  4. JS实战 · 实践积累点滴杂烩

    onmouseover : 鼠标进入 onmouseout : 鼠标离开 onfocus:得到焦点   表单提交执行JS代码,有两种常用方式. 一:在局部(比如按钮定义处)用onclick=" ...

  5. React 生命周期

    前言 学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1.g ...

  6. Java 对象引用方式 —— 强引用、软引用、弱引用和虚引用

    Java中负责内存回收的是JVM.通过JVM回收内存,我们不需要像使用C语音开发那样操心内存的使用,但是正因为不用操心内存的时候,也会导致在内存回收方面存在不够灵活的问题.为了解决内存操作不灵活的问题 ...

  7. 【夔堂】：程序血泪史之——有一种垃圾语言叫做JavaScript

    "Prototype"机制是个半成品OOP,有些文章说这玩意当初为了"简单(编写).容易(学习)"而发明的,但web前端技术发展到今天我们看到,JS显然是需要O ...

  8. 修改Credentials 密码

    今天,Leader 吩咐要修改管理账户的密码,我负责的Part是修改package和 Replication的Job的密码.仔细想了下,由于我们使用的Windows验证方式,而Job在执行时,是使用P ...

  9. Sql Server系列：Microsoft SQL Server Management Studio模板资源管理器

    模板资源管理器是Microsoft SQL Server Management Studio的一个组件,可以用来SQL代码模板,使用模板提供的代码,省去每次都要输入基本代码的工作. 使用模板资源管理器 ...

  10. 【原创】开源Math.NET基础数学类库使用(06)直接求解线性方程组

                   本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新  开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录 前言 ...