本文只是討論和實現了動畫效果，并未將動畫與頁面實際下載關聯，有朋友們問如何應用，可以使用現成的一些插件比如這個，這個，還有這個。

之前一篇文章《CSS3 動畫一瞥》簡單介紹了CSS3動畫相關的內容，這里繼續講一個例子。

前些時候有注意到YouTube網站放出的新特性，那就是在視頻頁面間切換時，頁面頂部會有一道華麗麗的紅色激光脈沖掠過。

那不是其他什么為了炫技的東西，它是一個進度條，平時我們見了千百遍經常以轉圈形式出現的進度條。當然谷歌對于進度展示的創新不止于此啦，比如用于谷歌加的下載gif也是很有新意的一個玩意兒。

但YouTube這個進度條似乎更具創新，讓人覺得相當驚艷。

所以好奇的我按捺不住想要拔開它神秘面紗的心情。

大體來看用了以下技術：

1. Ajax：首先頁面內容的加載使用的是Ajax異步請求，所以頁頭那個激光元素可以在內容請求與接收過程中得以展示，不然的話整個頁面刷新那就無法實現了；
2. HTML5 History API: 其次我注意到頁面地址也是跟著變的。前面提到整個頁面是沒有刷新的（一個不太靠譜的方法可以驗證這點是顯示網站favicon的地方沒有出現類似這樣的等待圖標），但頁面地址卻更新了，方便你把連接放送給別人時能夠打開該頁面。這里用到的就是HTML5的History API，通過它可以操作瀏覽器地址欄的地址，書簽及頁面狀態信息等。
3. CSS3動畫屬性 ：另外就是紅色激光線條本身的實現上，使用了CSS3的動畫或者JS寫的動畫，但更大的可能是兩種結合。

經過一些谷歌，發現也有其他同類在討論這個話題，并貼出了相關實現。拿來研究了下決定自己把玩一把分享給大家。

這里只是實現那個一道紅光掠過的效果，不包含對Http請求各個狀態的進度處理以得到頁面實際的加載進度，我們將把這個動畫效果寫成在一個固定的時間內完成，比如3秒。

準備工作

開始之前需要多少了解一點CSS3關于動畫相關的知識，可以通過我之前那篇博文，也可以到W3School進行了解。

其次，需要了解諸如 CSS3的transition等不常用的屬性。

最后還需要了解jQuery的animate API的使用。

分解實現

整個動畫可以分為兩個部分，一個是整體向前延伸的光線，另一個就是跑在最前面不停閃爍的頭部。

向前滑動的激光

首先來看如何實現一條向前延伸的光線效果的。

其實要實現這么一個效果使用CSS3的動畫屬性來做是非常簡單的，但為什么要使用jQuery來做呢，看完下面后答案就揭曉了。

先看純CSS3的版本。

1.新建一個html文件然后加入一個div，用來呈現這個向前的動畫。

2.然后開始給id為progress的div寫動畫。

考慮到簡略，一些CSS屬性為了能夠在不同瀏覽器里正常工作需要寫很多個版本，比如CSS3的animatiion正常情況下需要為每個不同內容的瀏覽器寫個版本的：

但我是在Chromium里做實驗，遇到這種情況就只考慮-webkit-前綴的了，在完整源碼里再把兼容其他瀏覽器的代碼補全。

設置目標元素背景色為深紅色（#b91f1f），高度為2px。因為這兩個屬性是在動畫過程中不變的，所以單獨寫出來。同時定義動畫關鍵幀：開始寬度為0，結束時寬度為100%。

然后對元素應用動畫，設定動畫時間為3秒：

現在可以保存頁面看效果了。

var iframe = document.getElementById('demo1'); iframe.src = iframe.src;

查看效果 //DEMO1 

我們會看到一條紅色線條向右飛去。但它沒有貼在頁面的邊緣，所以還需要將body的margin去掉。所以現在的代碼應該是這樣的。

效果是這樣的：

但問題出現了。當動畫放完后線條會一直存在，不會消失。但實際上進度完成了進度條就應該從頁面消失了。所以我們改為使用jQuery來實現，這樣可以在動畫完成后通過JavaScript將其隱藏。

更改為上面的代碼后，進度條播放完后會消失。

var iframe = document.getElementById('demo2'); iframe.src = iframe.src;

查看效果 //DEMO2

現在線條消失時太突兀了，我們需要讓它漸漸消失掉，需要用到CSS的transation屬性。

var iframe = document.getElementById('demo3'); iframe.src = iframe.src;

查看效果 //DEMO3

光暈與閃爍效果

我們可以看到在那束激光劃過時，其頭部是塊閃爍且周圍帶光暈效果的長條，所以剩下的部分就是完成這個東西了。

首先我們看閃爍如何做。

新建一個html文檔，頁面也是很簡單就一個div用于展示動畫。并且設置其樣式為帶陰影效果和圓角效果，圓角是為了看起來柔和一點。

//DEMO4

效果：

然后再為其編寫動畫效果，這個動畫效果是讓它閃爍，可能通過改變其透明度來控制，然后將動畫設置成無限播放模式，就出來想要的閃爍了。

//DEMO5

現在我們把這個效果加到原來那個線條上。在原來那個id為progress的div下加一個span元素用于呈現這個閃爍效果。

它必需一起處于線條的最右邊，所以考慮將其位置屬性設置為absolute并且將progress 那個div設為fixed。

所以最后的效果及代碼大概是這樣：

var iframe = document.getElementById('demo6'); iframe.src = iframe.src;

查看效果 //DEMO6

 例子代碼：下載

Reference:

http://www.youtube.com/watch?v=dN3xwItBKDA

https://www.facebook.com/photo.php?fbid=217862301702396

http://jsfiddle.net/ajaSB/3/light/

Animate.css https://daneden.me/animate/