1. 程式人生 > >HTML5 Loading動畫特效集錦

HTML5 Loading動畫特效集錦

以前我們大部分的Loading動畫都是利用gif圖片實現的,這種圖片實現Loading動畫的方法雖然也很不錯,但是作為HTML5開發者來說,如果能利用HTML5和CSS3實現這些超酷的Loading動畫,那將是一件非常痛快的事情。

1、HTML5 Canvas發光Loading動畫

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

html5-canvas-shine-loading

線上演示 / 原始碼下載

2、HTML5/CSS3粒子效果進度條

之前我已經分享了幾款效果很不錯的CSS3進度條外掛,比如CSS3 Loading進度條載入動畫特效CSS3 3D進度條按鈕 18款精美樣式。今天我再來分享一款很有特色的HTML5/CSS3進度條應用。這款進度條外掛在播放進度過程中出現粒子效果,就像一些小顆粒從進度條上散落下來,是一款別具特色的HTML5進度條外掛。

html5-css3-pixel-progress-bar

線上演示 / 原始碼下載

3、HTML5 SVG Loading 動畫載入特效

這是一款基於HTML5/CSS3和SVG的Loading載入動畫特效,一共有4種不同的動畫效果。每一組Loading動畫都非常可愛,他們都非常歡快的轉圈,同時又有顏色漸變的動畫效果。另外,回顧之前分享的一款CSS3 Loading動畫

HTML5 Canvas實現超酷Loading動畫

html5-svg-loading-animation

線上演示 / 原始碼下載

4、四組歡樂的CSS3 Loading載入動畫

還記得前段時間分享過的一款CSS3 Loading載入動畫麼,那是相當的歡樂,就是這款HTML5超具喜感的載入提示 轉圈的胖娃娃。今天我們又要再分享4組歡樂的CSS3 Loading載入動畫,這4款動畫是同一種模式,都是一群小球在大球裡面形成各種排列從而達到Loading載入動畫的效果。

4-happy-css3-loading-animation

線上演示 / 原始碼下載

5、jQuery自定義Loading動畫外掛spin.js

spin.js是一款基於jQuery的Loading動畫外掛,和之前分享的CSS3 Loading動畫應用不同的是,這款Loading動畫是基於jQuery的,意味著相容性更好;還有就是這款Loading動畫是可以自定義引數的,比如半徑、旋轉速度等都可以通過右側的滑桿來設定。

jquery-loading-spin-js

線上演示 / 原始碼下載

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

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

css3-3d-cube-loading

線上演示 / 原始碼下載

7、CSS3 Loading進度條載入動畫特效 3款絢麗風格

前面我向大家分享了幾款非常漂亮的CSS3進度條外掛,CSS3 SVG 進度條 Loading 動畫純CSS3進度條 華麗5色進度條示例。今天我要分享一款更加炫酷的CSS3進度條載入動畫特效,該動畫特效有3個不同的風格,注意,IE6,7,8是不支援該進度條動畫的。

3-css3-loading-progress

線上演示 / 原始碼下載

這些HTML5 Loading動畫比起gif圖片來說,你更喜歡哪個?歡迎收藏分享本文。