纯CSS3实现动态火车行驶特效
上次开完飞机，这次开火车
查看效果：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实现动态火车行驶特效的更多相关文章
- 纯css3 加载loading动画特效
最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...
- 纯css3实现的文字亮光特效
今天给大家分享一款纯css3实现的文字亮光特效.这款特效文字上一道亮光逐渐扫过文字.效果非常漂亮.一起看下效果: 在线预览 源码下载 实现的代码. html代码: <span class=& ...
- 2014圣诞节一款纯css3实现的雪人动画特效
在2014年的圣诞节,爱编程小编给大家分分享一款纯css3实现的雪人动画特效.该实例实现一个雪人跳动的特效,效果图如下: 在线预览 源码下载 实现的代码. html代码: <span cla ...
- 纯CSS3实现动态导航栏目
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 纯CSS3绘制神奇宝贝伊布动画特效
在线演示 本地下载
- 一款纯css3实现的发光屏幕旋转特效
今天给大家带来一款纯css3实现的发光屏幕旋转特效.该屏幕由纯css3实现带发光旋转特效,效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="s ...
- 纯CSS3实现多层云彩变换飞行动画
查看效果:http://hovertree.com/texiao/css3/4/效果2 效果图: 代码如下: <!doctype html> <html lang="zh& ...
- 8个超炫酷的纯CSS3动画及源码分享
在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页.本文要分享8个超炫酷的纯CSS3 ...
- CSS3圆环动态弹出菜单
体验效果:http://hovertree.com/texiao/css3/44/ 代码如下: <!DOCTYPE html> <html lang="zh"&g ...
随机推荐
- 剑指Offer面试题：9.二进制中1的个数
一.题目:二进制中1的个数 题目:请实现一个函数,输入一个整数,输出该数二进制表示中1的个数.例如把9表示成二进制是1001,有2位是1.因此如果输入9,该函数输出2. 二.可能引起死循环的解法 一个 ...
- TODO：小程序手机预览调试
TODO:小程序手机预览调试 1. 小程序注册,目前还未开通个人注册,主体类型为企业.政府.媒体.其他组织 2. 登录小程序,绑定开发者,获取AppID 3. 下载微信小程序示例-新片预告 https ...
- slave IO流程之二：注册slave请求和dump请求
slave IO流程已经在http://www.cnblogs.com/onlyac/p/5815566.html中有介绍 这次我们要探索注册slave请求和dump请求的报文格式和主要流程. 一.注 ...
- The currently selected variant "arm-debug" uses split APKs, but none of the 1 split apks are compatible with the current device with density "213" and ABIs "x86".
出现这种错误一般是在电脑上用模拟器运行APK的吧. 可以在build.gradle中这样配置下: android{ ... defaultConfig { applicationId "XX ...
- 利用Bootstrap快速搭建个人响应式主页（附演示+源码）
1.前言 我们每个程序员都渴望搭建自己的技术博客平台与他人进行交流分享,但使用别人的博客模板没有创意.做网站后台的开发人员可能了解前端,可是自己写一个不错的前端还是很费事的.幸好我们有Bootstra ...
- LINQ系列：LINQ to DataSet的DataTable操作
LINQ to DataSet需要使用System.Core.dll.System.Data.dll和System.Data.DataSetExtensions.dll,在项目中添加引用System. ...
- sizzle分析记录：getAttribute和getAttributeNode
部分IE游览器下无法通过getAttribute取值? <form name="aaron"> <input type="text" name ...
- Windows Phone 8弹窗
新建一个UserControl,添加到相应位置 <Grid x:Name="LayoutRoot" Background="{StaticResource Phon ...
- 移动端web开发
meta基础知识点: 页面自动调整到设备宽度,并禁止用户缩放. <meta name="viewport" content="width=device-width, ...
- AngularJS之高级Route【三】（八）
前言 我们知道默认的路由提供(Route Provider)在复杂的应用程序中是不太适合应用场景,它存在诸多限制,所以在Angular 1.2之后此时我们不得不将路由提供作为一个单独的模块当我们需要使 ...