超級驚豔 10款HTML5動畫特效推薦

edithfang發表於2014-07-07

1、HTML5 Canvas發光Loading動畫

之前我們分享過很多基於CSS3的Loading動畫效果,相信大家都很喜歡。今天我們要來分享一款基於HTML5 Canvas的發光Loading載入動畫特效。Loading旋轉圖示是在canvas畫布上繪製的,整個loading動畫是發光3D的視覺效果,HTML5非常強大。

html5-canvas-shine-loading



線上演示 原始碼下載

2、jQuery球狀放大鏡特效外掛

今天我們要來分享一款基於jQuery的放大鏡特效外掛,和其他放大鏡不同的是,這款jQuery放大鏡外掛是球狀的,看上去有3D的視覺效果。當你把滑鼠滑過頁面上的文字時,即會出現很酷的球狀放大鏡,來放大當前區域的文字。並且以球心為中心點向外文字逐漸變小,這就產生了立體感。

jquery-ball-zoom-in



線上演示 原始碼下載

3、HTML5 Canvas粒子模擬效果

這是一款利用HTML5 Canvas模擬出來的30000個粒子動畫,當你用滑鼠在canvas畫布上移動時,滑鼠周圍的一些粒子就會跟著你移動,並形成一定的圖案,就像你在玩沙畫一樣,效果非常不錯。這裡,我們應用了一些HTML5的特性,讓這個粒子動畫顯得相當動感。

html5-canvas-particle-effect



線上演示 原始碼下載

4、HTML5/CSS3帶區域地圖的聯絡表單

之前我們分享很多樣式和功能各異的CSS3聯絡表單,比如HTML5/CSS3簡易聯絡表單 扁平化風格、CSS3聯絡表單 背景透明迷人等等,都非常不錯。今天我們要來分享一款功能更加強大的HTML5/CSS3聯絡表單,它可以選中不同區域顯示相應的地圖,然後針對該區域填寫聯絡表單。

html5-css3-contact-form-map



線上演示 原始碼下載

5、CSS3 3D立方體Loading載入動畫特效

之前我們分享過一些HTML5和CSS3的3D立方體特效,他們都是可以旋轉來展示3D立體的效果。這次分享的這款CSS33D立方體確是用來做Loading載入動畫的,9個小立方體上下浮動,呈現波浪的效果,並且,這個Loading動畫還利用了CSS3的陰影屬性讓這些立方體更充滿3D色彩。

css3-3d-cube-loading



線上演示 原始碼下載

6、超具立體感的CSS3 3D選單 選單項帶小圖示

記得之前向大家分享過不少CSS3 3D選單,比如CSS3 3D動畫選單 3D立方體選單項和HTML5/CSS3自定義下拉框3D卡片摺疊動畫,效果都很漂亮。今天我們要再分享一款更酷的CSS33D立體選單,這款選單側躺在頁面上,每個選單項都有不錯的小圖示。

css3-3d-navigation-menu



線上演示 原始碼下載

7、基於Bootstrap和CSS3的響應式UI框架

還記得之前我們分享過的Metro扁平化風格的jqueryUI元件麼,看上去是不是非常清新和絢麗?今天我們要來分享一組基於Bootstrap和CSS3的響應式UI框架,這個UI框架中,包含了自定義CSS3按鈕、自定義CSS3核取方塊和單選框、自定義CSS3下拉框等等,外觀非常漂亮。

bootstrap-css3-ui-framework



線上演示 原始碼下載

8、純CSS3立體動畫選單 選單項按下有內陰影

這次小編來分享一款利用純CSS3實現的立體動畫選單,該選單的實現非常簡單,並沒有太多的特效渲染,但是看起來卻非常乾淨漂亮,尤其配合灰黑色的背景,讓選單顯得有點立體的感覺。另外,當我們點選選單項時,選單項將會出現內陰影的視覺效果。

css3-ckean-mini-menu-animation



線上演示 原始碼下載

9、HTML5 Canvas動畫按鈕 點選水波擴散效果

之前我們分享的都是基於CSS3的自定義按鈕,今天我們來分享一款基於HTML5 Canvas的動畫按鈕,每一個按鈕都是一個canvas畫布,這就很靈活,你可以在canvas繪製任意你喜歡的東西作為按鈕的背景畫面,並且,還可以有動畫特效。

html5-canvas-animated-button



線上演示 原始碼下載

10、CSS3/jQuery實現Tab選單小工具

幾天要分享一款基於CSS3和jQuery的Tab選單,這款Tab選單的外觀非常簡潔清新,tab選項卡的上邊框有加粗的線條,讓這些tab選單按鈕顯得很有立體感。另外有一點不足的是,tab切換時沒有加入CSS3動畫效果。這款tab選單可以放到你網頁的側邊欄作為小工具。

css3-jquery-tab-menu-widget



線上演示 原始碼下載

以上就是10款超級驚豔的HTML5動畫特效,歡迎收藏分享。

本文轉載自:http://www.html5tricks.com/10-wonderful-html5-animation.html
相關閱讀
評論(0)

相關文章