纯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 ...
随机推荐
- Entity Framework与ADO.NET批量插入数据性能测试
Entity Framework是.NET平台下的一种简单易用的ORM框架,它既便于Domain Model和持久层的OO设计,也提高了代码的可维护性.但在使用中发现,有几类业务场景是EF不太擅长的, ...
- MySQL Dll语句
标签:MYSQL数据库/DBA/删除数据库表 概述 因为遇到一些事情,从发表上一篇文章到现在中间间隔了好几个月时间:在接下来的时间里会陆续发表关于mysql的一些文章,从基础到优化最后到管理,欢迎关注 ...
- 基于GIS的旅游辐射区人口统计
在旅游规划中,考虑旅游景点周边的人口负载量是很重要的一个方面,这将直接影响资源的投入和配置,开发潜力和规模等.基于GIS可以将人口信息进行空间化的展示,还可以通过空间分析的方法计算出旅游景点辐射区的人 ...
- 微冷的雨之Java中的多线程初理解(一)
在讲解多线程前,我们必须理解什么是多线程?而且很多人都会将进程和线程做对比. 进程和线程 进程:进程是操作系统结构的基础,是一次程序的执行,是一个程序及其数据在处理机上顺序执行时所发生的活动,是程序在 ...
- 使用sklearn做单机特征工程
目录 1 特征工程是什么?2 数据预处理 2.1 无量纲化 2.1.1 标准化 2.1.2 区间缩放法 2.1.3 标准化与归一化的区别 2.2 对定量特征二值化 2.3 对定性特征哑编码 2.4 缺 ...
- FASTJSON
package com.hanqi.test; import java.util.ArrayList;import java.util.Date;import java.util.List; impo ...
- crossplatfrom---electron入门教程
1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...
- 我的SQL总结---未完待续
我的SQL总结---未完待续 版权声明:本文为博主原创文章,未经博主允许不得转载. 总结: 主要的SQL 语句: 数据操作(select, insert, delete, update) 访问控制(g ...
- Math的三个将小数值舍入为整数方法
舍入规则: Math.ceil():执行向上舍入,即它总是将数值向上舍入为最接近的整数: Math.floor():执行向下舍入,即它总是将数值向下舍入为最接近的整数: Math.round():执行 ...
- 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...