2015-5-19 藍(lán)藍(lán)設(shè)計(jì)的小編
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
每一個(gè)扁平化界面設(shè)計(jì)，都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)
來(lái)源：http://www.ithome.com/html/soft/92308.htm
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
關(guān)于HTML5動(dòng)畫(huà)，我們已經(jīng)分享太多了，當(dāng)然也有很多利用純CSS3實(shí)現(xiàn)的動(dòng)畫(huà)效果。今天我們精選了7款基于HTML5、Canvas以及CSS3的動(dòng)畫(huà)，同時(shí)也提供源代碼，一起來(lái)看看吧。
1、HTML5 Canvas模擬衣服撕扯動(dòng)畫(huà) 超級(jí)逼真
今天又要來(lái)推薦一款HTML5 Canvas動(dòng)畫(huà)，是一個(gè)模擬衣服撕扯動(dòng)畫(huà)，效果非常逼真。剛開(kāi)始衣服掛在繩子上，用鼠標(biāo)拖拽衣服即可讓衣服擺動(dòng)起來(lái)，當(dāng)你拖拽的很用力時(shí)，你會(huì)發(fā)現(xiàn)，衣服被撕破了。該HTML5動(dòng)畫(huà)會(huì)捕獲到鼠標(biāo)拖拽的用力程度，從而來(lái)判斷并實(shí)現(xiàn)衣服應(yīng)該破損的程度，越用力，衣服被撕破的速度越快，趕緊來(lái)體驗(yàn)一下這個(gè)HTML5動(dòng)畫(huà)吧。
2、CSS3 3D分頁(yè)導(dǎo)航按鈕
這是一款用CSS3實(shí)現(xiàn)的3D分頁(yè)導(dǎo)航按鈕，和之前分享的一些jQuery分頁(yè)插件一樣，這款CSS3 3D分頁(yè)插件同樣具有前和分頁(yè)頁(yè)碼和數(shù)字頁(yè)面，不同的是，這款分頁(yè)插件的分頁(yè)頁(yè)碼是一個(gè)個(gè)3D的導(dǎo)航按鈕，樣式十分新穎，不過(guò)需要CSS3支持。
3、HTML5 3D 卡片視頻播放器 超立體視覺(jué)
這是一款基于HTML5的視頻播放器，不過(guò)你一眼看上去，它并不像一款播放器，而是一張張3D立體的卡片，沒(méi)有播放按鈕，沒(méi)有音量設(shè)置。不過(guò)它的特色就是把HTML5視頻播放器嵌入到卡片里面，然后這些卡片可以和用戶(hù)互動(dòng)，并產(chǎn)生HTML5 3D的效果，非常不錯(cuò)的創(chuàng)意。點(diǎn)擊卡片即可播放視頻。
4、HTML5粘瀏覽器的小泥塊 超級(jí)可愛(ài)動(dòng)畫(huà)
這款HTML5動(dòng)畫(huà)非?？蓯?ài)，動(dòng)畫(huà)的主角是一款粘人的小泥塊，用鼠標(biāo)拖動(dòng)泥塊，泥塊即可粘住瀏覽器，讓后一點(diǎn)點(diǎn)掉落下來(lái)。而完成這樣的HTML5動(dòng)畫(huà)，我們只需一張圖片和一系列CSS3代碼即可。雖然這款動(dòng)畫(huà)實(shí)用性并不強(qiáng)，但是其中的HTML5原理值得大家學(xué)習(xí)。
5、jQuery/CSS3帶當(dāng)前時(shí)間的日歷插件
網(wǎng)頁(yè)上日歷插件應(yīng)用非常廣泛，尤其是在個(gè)人空間和博客上，就需要更多個(gè)性化的日歷插件了。這款jQuery/CSS3日歷插件應(yīng)該說(shuō)還是蠻具有個(gè)性化的，尤其是它帶有當(dāng)前時(shí)間的特點(diǎn)，這樣除了星期、日期，你還可以看本地時(shí)間，功能十分強(qiáng)大的jQuery日歷插件。
6、CSS3垂直進(jìn)度條動(dòng)畫(huà) 數(shù)字百分比顯示
這次我們要來(lái)分享一款CSS3進(jìn)度條動(dòng)畫(huà)，這款進(jìn)度條是垂直放置的，在進(jìn)度加載的時(shí)候，進(jìn)度條的背景會(huì)出現(xiàn)一個(gè)快速移動(dòng)的箭頭動(dòng)畫(huà)，并且隨著進(jìn)度條的移動(dòng)，數(shù)字百分比也將隨著進(jìn)度實(shí)時(shí)更新，直至進(jìn)度完成，完成后進(jìn)度條顏色由紅色編程綠色。
7、HTML5 Canvas 3D 倒計(jì)時(shí)爆炸
今天要分享的這款 HTML5 3D動(dòng)畫(huà)非常給力，它是一個(gè)基于Canvas的倒計(jì)時(shí)爆炸效果，隨著時(shí)間的走動(dòng)，時(shí)間數(shù)字傍邊就會(huì)有爆炸的，一群像素點(diǎn)就會(huì)在數(shù)字中心爆發(fā)出來(lái)，感覺(jué)非常酷。而且應(yīng)用了HTML5的3D特性，讓整一個(gè)時(shí)鐘顯得非常有立體感。
以上就是7款效果震撼的HTML5動(dòng)畫(huà)應(yīng)用及源碼，歡迎收藏分享。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.bouu.cn