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

查看效果：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. Css 动画的回调

    在做项目中经常会遇到使用动画的情况.以前的情况是用js写动画,利用setTimeout函数或者window.requestAnimationFrame()实现目标元素的动画效果.虽然后者解决了刷新频率 ...

  2. 剑指Offer面试题：26.字符串的排列

    一.题目:字符串的排列 题目:输入一个字符串,打印出该字符串中字符的所有排列.例如输入字符串abc,则打印出由字符a.b.c所能排列出来的所有字符串abc.acb.bac.bca.cab和cba. 二 ...

  3. iOS开发系列--Objective-C之协议、代码块、分类

    概述 ObjC的语法主要基于smalltalk进行设计的,除了提供常规的面向对象特性外,还增加了很多其他特性,这一节将重点介绍ObjC中一些常用的语法特性.当然这些内容虽然和其他高级语言命名不一样,但 ...

  4. RTSP协议转换RTMP直播协议

    RTSP协议转换RTMP直播协议 RTSP协议也是广泛使用的直播/点播流媒体协议,最近实现了一个RTSP协议转换RTMP直播协议的程序,为的是可以接收远端设备或服务器的多路RTSP直播数据,实时转换为 ...

  5. CSS 兼容解决之hack

    什么是CSS hack 由于不同的浏览器,甚至同一浏览器的不同版本对CSS的解析认识不一样,导致生成的页面效果不一致,写出针对不同浏览器CSS code就称为CSS hack. 常用的CSS hack ...

  6. struts.xml的编辑

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "- ...

  7. 传智播客--数据绑定--INotifyPropertyChanged（小白内容）

    INotifyPropertyChanged一般在数据绑定的时候使用. InotifyPropertyChanged是.net内置的接口,数据绑定时会检测DataContext是否实现了Inotify ...

  8. DOM操作

    DOM操作,JS来操作页面 wiindows对象操作 document对象操作 点击事件:将DIV要执行的事件代码装封 onclick  鼠标单击       ondblelick  鼠标双击 onk ...

  9. Ubuntu杂记之——JDK、ANT安装、配置

    一.安装JDK 方法一:使用软件源安装openjdk sudo apt-get install openjdk-7-jdk 方法二:使用软件源安装sun jdk sudo apt-get instal ...

  10. 精彩 .NET 2015

    英文原文:Understanding .NET 2015 Understanding 翻译为了解或理解,对于 .NET 来说,2015 年注定会更加精彩,所以标题就用了"精彩"这个 ...