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

查看效果：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. MyBatis（增删改查）

    1.工程中引入包: mybatis-3.2.7.mysql-connector-java-5.1.22-bin 2.添加配置文件: <?xml version="1.0" e ...

  2. .NET开发笔记（二十三） 谷歌地图下载

    关于如何将地球经纬度坐标系统转换成程序中常用到的平面2D坐标系统,网上的文章很多,参考http://www.cnblogs.com/beniao/archive/2010/04/18/1714544. ...

  3. Net作业调度(四)—quartz.net持久化和集群

    介绍 在实际使用quartz.net中,持久化能保证实例重启后job不丢失. 集群能均衡服务器压力和解决单点问题. quartz.net在这两方面配置都比较简单. 持久化 quartz.net的持久化 ...

  4. 新功能发布！Markdown写博客！

    有一种神奇的语言,它比html还简单,它巧妙地将内容与格式整合在一起--它就是Markdown. 现在我们实现了博客对Markdown的内置支持,可以让您轻松地在园子里用这个神奇的语言写博客! &qu ...

  5. JS、JQuery和ExtJs的跨域处理

    1.什么是跨域?跨域,JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.简单地理解就是因为JavaScript同源策略的限制,a.com 域名下的js无法操作b.com或是c.a. ...

  6. 队列送券的实际应用--ConcurrentLinkedQueue并发队列

    1.TicketQueue.java--队列封装类,负责如下职责:a.把活动登记对象放入队列中b.从队列中获取活动登记对象,并派券 package com.datong.pear.ticket; im ...

  7. 日历组件 原生js

    自己基于原生js编写的日历组件 git地址: https://github.com/lihefen/calendar.git demo : https://lihefen.github.io/cale ...

  8. Laravel 5.3 auth中间件底层实现详解

    1. 注册认证中间件, 在文件 app/Http/Kernel.php 内完成: protected $routeMiddleware = [ 'auth' => \Illuminate\Aut ...

  9. ScriptTask读取SharePoint上的Excel

    很多情况下,我们会SharePoint 作为文件共享的Server,有时,业务上需要将SharePoint上的Excel文档 Download 到db中.对于搞DB的人来说,难点是如何下载Excel? ...

  10. jQuery源码分析系列(34) : Ajax - 预处理jsonp

    上一章大概讲了前置过滤器和请求分发器的作用,这一章主要是具体分析每种对应的处理方式 $.ajax()调用不同类型的响应,被传递到成功处理函数之前,会经过不同种类的预处理(prefilters). 预处 ...