10個帥酷的HTML5最新動畫應用

edithfang發表於2014-11-13
在上個月,我們收集了不少來自國內外的HTML5相關資源和jQuery外掛,其中包括很多經典帥酷的HTML5動畫應用,有些還利用了Canvas和SVG的相關特性,從而讓HTML5動畫更加具有強烈的視覺效果。本文總結了上個月的最新HTML5動畫應用,希望大家會喜歡。

1、HTML5人物跑步動畫

記得之前給大家分享過一款HTML5人物行走動畫,效果非常震撼。今天要介紹的HTML5動畫更加炫酷,是一款基於HTML5的人物跑步動畫特效,在這款人物跑步動畫中你可以點選按鈕來切換人物手中拿的武器,效果非常逼真。



線上演示 原始碼下載

2、純CSS3實現眨眼動畫 超逼真

我們在不久前分享過很多純CSS3實現的人物和動物動畫,每一款動畫的效果都非常不錯。今天我們要分享一個純CSS3實現的眨眼動畫,其動畫效果超級逼真,拿它來做動畫人物的眼睛非常適合,這款CSS3眨眼動畫完全用CSS3繪製,並沒有使用圖片。



線上演示 原始碼下載

3、HTML53D立方體圖片切換動畫

今天我們要來分享一款HTML5圖片切換動畫,該HTML5動畫主要是將圖片分成幾個塊,切換時每一個塊都會以3D立方體的形式過度下一張圖片,立方體的打散和聚合動畫都非常酷,你可以在JS檔案中配置圖片的路徑和切換的數量,相當靈活。



線上演示 原始碼下載

4、CSS3簡易清新的下拉選單

對於CSS3選單我們已經在以前分享過很多了,有華麗的動畫選單,也有衝擊視覺的3D選單,今天要介紹的是一款簡易而實用的下拉選單,綠色的主題風格,讓選單的外觀看上去非常清新,下拉選單的顏色和主選單的顏色搭配也非常不錯。



線上演示 原始碼下載

5、HTML5/jQuery迷人音樂播放器jPlayer

今天我們要來分享一款非常精巧的jQuery音樂播放器外掛jPlayer,這款jQuery音樂播放器的外觀非常迷人,可以自定義漂亮的播放器背景圖片,而且播放器需要的功能它都齊全,更完美的是,這款jQuery音樂播放器還支援分享至社交網站。



線上演示 原始碼下載

6、HTML5自定義背景圖片的文字特效

在HTML5和CSS3標準出來之前,文字的背景只能是純色,更不用說是自定義背景圖片了。然而,強大的HTML5不僅讓文字背景支援漸變顏色,而且支援自定義的背景圖片,這些圖片就像遮罩層,讓文字的背景變得豐富多彩。



線上演示 原始碼下載

7、純CSS3實現多種箭頭繪製及動畫

今天要介紹的這款CSS3應用也非常實用,利用它可以用純CSS3實現各種箭頭的繪製,包括左右箭頭、上下箭頭以及各個方向的轉彎箭頭,另外還有一款更酷的CSS3箭頭動畫特效,可以用來做Loading載入動畫。這麼多箭頭,你可以任選一個應用到專案中去。



線上演示 原始碼下載

8、CSS3帶小圖示垂直下拉選單

這是一款效果非常不錯的CSS3垂直下拉選單,選單左側是每一個選單項的功能小圖示,右側也可以定義一些數字小圖示,並且在選單項最右側是tooltip的樣式。另外,當滑鼠滑過選單項時將會改變選單的背景顏色,其中的圓角效果由簡單的CSS3屬性完成。



線上演示 原始碼下載

9、CSS3自定義美化UL OL列表

這是我們之前沒有分享過的CSS3特效型別,它是一個可以自定義美化UL和OL列表的CSS3應用。當我們將滑鼠滑過每一個列表項的時候都會出現一定的動畫特效,效果非常不錯。這種列表美化樣式一共有3種,發光效果最酷了。



線上演示 原始碼下載

10、jQuery Bootstrap響應式下拉選單

今天我們要來分享一個基於jQuery和Bootstrap的響應式下拉選單,這款選單的特點就是選單項可以有二級下拉選單,而且當頁面寬度比較窄時選單項將集中在一個下拉選單下,非常適合移動網站。由於是基於jQuery的,相容性也還可以。



線上演示 原始碼下載

以上就是10個很酷的HTML5動畫,歡迎收藏分享。

本文作者:html5tricks – 超人
相關閱讀
評論(1)

相關文章