DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 網頁特效代碼 >> css3列車行駛動畫
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>&#x4F55;&#x95EE;&#x8D77;</h2>
&#27426;&#36814;&#20056;&#22352;&#20309;&#38382;&#36215;&#21495;&#21015;&#36710;&#32;&#104;&#111;&#118;&#101;&#114;&#116;&#114;&#101;&#101;&#46;&#99;&#111;&#109; </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>
網頁特效代碼
jQuery制作的掃雷游戲
《掃雷》是一款大眾類的益智小游戲，於1992年發行。游戲目標是在最短的時間內根據點擊格子出現的數字找
BootStrap自適應HTML模版之商城首頁
本特效支持PC浏覽器和觸屏浏覽器。效果展示手機掃描二維碼體驗效果：HTML代碼如下：<!DOC
使用YesTop插件實現返回頂部按鈕
只需一句jQuery代碼實現返回頂部效果體驗：http://hovertree.com/texiao

相關文章

前端技巧關於網頁技巧WEB前端代碼網頁特效代碼
小編推薦
猴年春節對聯CSS特效 CSS3漂亮的搜索框功能 jQuery點擊文本框顏色拾取器的多種方式 現代舞舞蹈家瑪莎·葛蘭姆動畫Logo 純HTML+CSS豎向選項卡鼠標滑過切換 純CSS3制作風車旋轉動畫並控制速度 jQuery實現玩家幸運抽獎活動 jQuery移動端頁面側邊導航滑入效果 jQueryMobile示例頁面代碼 jQuery+HTML5電子通知倒計時特效
熱門推薦
CSS3鼠標懸浮線條邊框動畫 js觸屏touchmove手勢事件實例 jQuery光標經過圖片顯示遮罩鏈接層 jQuery逼真下雪再來一款 jQuery網頁五子棋源代碼 使用HTML5 Canvas實現圖片馬賽克模糊 jQuery圖片列表點擊彈出大圖層 JS右下角懸浮可最小化和關閉的廣告 自適應餐廳網站靜態模板效果
大家都在看
javascript數組常用方法匯總 javascript textContent與innerText的異同分析 javascript常用對話框小集 HTML 5視頻編碼存爭議 各方觀點不一 JavaScript中的anchor()方法使用詳解 CSS制作網頁：position:relative Express作者TJ告別Node.js奔向Go Ajax 入門[很好的學習資料]
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved