时间：2021-07-01 10:21:17 帮助过：49人阅读
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>
转自：http://hovertree.com/h/bjaf/hovertreetrain.htm
推荐：http://hovertree.com/h/bjaf/kqud99m6.htm
更多特效：http://www.cnblogs.com/roucheng/p/texiao.html