這是必然要發生的一件事情，就是當有人輸入一個錯誤的URL或通過一個錯誤的鏈接到您的網站。這個就是404頁頁面顯示，在我所見到的404頁面當中，幾乎很少發現很有個性的404頁面能夠讓用戶記住這個網站的頁面，大都是弄一張圖片來實現，你有沒有想過其實可以用動感力很強的動畫來實現呢？你可以花時間，並設計一個友好的錯誤頁面，以鼓勵用戶留在你的網站。
今天，正因為這一點。我將創建一個動畫404頁，您可以輕松地定制和改善。廢話少說，看演示附源碼下載
The HTML
在這里，我們使用新的HTML5文檔類型hgroup標簽。HEAD部分中，啟用了對IE注釋的html5條件注釋,幫助IE識別html5標簽
404.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>Creating an Animated 404 Page | Tutorialzine Demo</title> 6 7 <!-- Internet Explorer HTML5 enabling script: --> 8 9 <!--[if IE]> 10 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 11 <![endif]--> 12 13 <link rel="stylesheet" type="text/css" href="styles.css" /> 14 15 </head> 16 17 <body> 18 19 <div id="rocket"></div> 20 21 <hgroup> 22 <h1>Page Not Found</h1> 23 <h2>悲劇了親，我們沒有找到你想要的頁面.</h2> 24 </hgroup> 25 26 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 27 <script src="script.js"></script> 28 </body> 29 </html>
看上面的html代碼，在引入html5腳本文件之后，我們又引用了css樣式表，這個你們都懂. 在body標簽中, 包含了一個ID是 rocket 的DIV和 html5的標簽 hgroup. rocket div 有一張 rocket.png 的圖片作為背景, ，它有許多應用，包括相對定位，這是需要的動畫風格，下面將會用到.
最后，我們引用jQuery庫和script.js文件.
The CSS
rocket的定位是使用圖片作為背景相對定位。
1 body{ 2 background:url('img/bg.png') no-repeat center center #1d1d1d; 3 color:#eee; 4 font-family:Corbel,Arial,Helvetica,sans-serif; 5 font-size:13px; 6 } 7 8 #rocket{ 9 width:275px; 10 height:375px; 11 background:url('img/rocket.png') no-repeat; 12 margin:140px auto 50px; 13 position:relative; 14 } 15 16 /* Two steam classes. */ 17 18 .steam1, 19 .steam2{ 20 position:absolute; 21 bottom:78px; 22 left:50px; 23 width:80px; 24 height:80px; 25 background:url('img/steam.png') no-repeat; 26 opacity:0.8; 27 } 28 29 .steam2{ 30 31 /* .steam2 shows the bottom part (dark version) 32 * of the background image. 33 */ 34 35 background-position:left bottom; 36 } 37 38 hgroup{ 39 40 /* Using the HTML4 hgroup element */ 41 42 display:block; 43 margin:0 auto; 44 width:850px; 45 font-family:'Century Gothic',Calibri,'Myriad Pro',Arial,Helvetica,sans-serif; 46 text-align:center; 47 } 48 49 h1{ 50 color:#76D7FB; 51 font-size:60px; 52 text-shadow:3px 3px 0 #3D606D; 53 white-space:nowrap; 54 } 55 56 h2{ 57 color:#9FE3FC; 58 font-size:18px; 59 font-weight:normal; 60 padding:25px 0; 61 }
火箭下面噴射出來的氣體叫蒸汽，我們用.steam這樣的類表示，他們每個的跨度是 80*80,, 使用 steam.png 作為背景 這個圖片是兩倍的寬度即(160), 。steam1和steam2班的圖像顯示了各自的圖像。定位產生錯覺
jQuery向rocket容器創建並且插入蒸汽跨度，並且將它們向相反的方向運動；
The jQuery
正如我們上面所討論的，jQuery的部分是創建動畫的廢氣。讓我們仔細看看這是如何實現的。
該腳本的開頭附加一個事件監聽器的load事件。，在window.load，將觸發不僅是DOM，animSteam()和moveRocket()函數同時被加載。
1 $(window).load(function(){ 2 3 // We are listening for the window load event instead of the regular document ready. 4 5 function animSteam(){ 6 7 // Create a new span with the steam1, or steam2 class: 8 9 $('<span>',{ 10 className:'steam'+Math.floor(Math.random()*2 + 1), 11 css:{ 12 // Apply a random offset from 10px to the left to 10px to the right 13 marginLeft : -10 + Math.floor(Math.random()*20) 14 } 15 }).appendTo('#rocket').animate({ 16 left:'-=58', 17 bottom:'-=100' 18 }, 120,function(){ 19 20 // When the animation completes, remove the span and 21 // set the function to be run again in 10 milliseconds 22 23 $(this).remove(); 24 setTimeout(animSteam,10); 25 }); 26 } 27 28 function moveRocket(){ 29 $('#rocket').animate({'left':'+=100'},5000).delay(1000) 30 .animate({'left':'-=100'},5000,function(){ 31 setTimeout(moveRocket,1000); 32 }); 33 } 34 35 // Run the functions when the document and all images have been loaded. 36 37 moveRocket(); 38 animSteam(); 39 });
animSteam（）函數是形成煙霧效果的函數。當被調用時，函數運行一個動畫， 當第一遍動畫完成的時候, 使用 setTimeout 延遲10秒鍾重新運行
該腳本隨機選擇第10行之間的steam1和steam2類和跨度水平的margin-left偏移量的一個隨機值. 在 animate() 方法中, 從steam的div（這正好是在噴嘴的火箭）的當前位置和移動向左移動58和向下移動100像素到了最下面。如下面
在這之后，我們通過 - 120毫秒來延續動畫，動畫完成后。然后再回調這個函數，如此反復
兩外一個動畫的函數- moveRocket（）控制火箭左側到右側移動通過修改左側的CSS屬性。animate()moveRocket（）這兩個函數可以同時調用，你也可以調用其中一個，把另外一個注釋掉，animate()噴射蒸汽，moveRocket（）從左到右邊移動
記住, 使頁面顯示了一個404錯誤，你需要給你的.htaccess文件中加入這一行
ErrorDocument 404 /404.html
hide