纯CSS3实现动态火车行驶特效 - roucheng

程序员文章站 2022-04-17 15:16:06

...

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

查看效果：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>

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>
 

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>