8款帥酷的HTML5/CSS3 3D動畫、圖片、選單應用

edithfang發表於2014-06-11

1、HTML5 Canvas火焰燃燒動畫 如同掉落的火球

這次要分享的是一款超級絢麗的HTML5火焰動畫,畫面上是一個熊熊燃燒的小火球,小球燃燒的火焰非常逼真,會比較消耗CPU。另外這個動畫是在HTML5 Canvas上實現的,修改起來也非常靈活。之前也分享過幾款HTML5火焰動畫,像這款HTML5 Canvas火焰閃爍動畫

線上演示        原始碼下載

2、HTML5/CSS3粒子效果進度條 超炫酷進度條動畫

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

線上演示        原始碼下載

3、HTML5 Canvas模擬衣服撕扯動畫 超級逼真

今天又要來推薦一款HTML5 Canvas動畫,是一個模擬衣服撕扯動畫,效果非常逼真。剛開始衣服掛在繩子上,用滑鼠拖拽衣服即可讓衣服擺動起來,當你拖拽的很用力時,你會發現,衣服被撕破了。該HTML5動畫會捕獲到滑鼠拖拽的用力程度,從而來判斷並實現衣服應該破損的程度,越用力,衣服被撕破的速度越快,趕緊來體驗一下這個HTML5動畫吧。

線上演示        原始碼下載

4、CSS3帶描述焦點圖 文字描述上下滾動

今天我們來分享一款jQuery焦點圖外掛,這款焦點圖是全屏的,看上去十分大氣,另外,焦點圖的每一張圖片都帶有文字描述,並且滑鼠滑過圖片時文字描述可以上下滾動。對於帶文字描述的圖片特效,我們還可以看看HTML5/CSS3圖片描述效果 文字描述浮動在圖片上

線上演示        原始碼下載

5、HTML5/CSS3自定義下拉框 3D卡片摺疊動畫

之前我們分享過一款CSS3帶小圖示下拉選單,它更多的是一款選單,但是今天要分享的一款CSS3自定義下拉框取代了傳統的Select樣式,用不一樣的風格來讓select更加美觀。這款CSS3下拉框還有3D立體的卡片摺疊動畫效果,非常酷。

線上演示        原始碼下載

6、HTML5 3D立方體動畫 立方體可任意翻轉

之前我們分享過很多基於HTML5的立方體動畫了,有些是基於Canvas的動畫特效,比如這款HTML5 webkit 3D立方體圖片旋轉滑塊應用,就很不錯。這次要分享的這款HTML5 3D立方體動畫比較普通,它可以自己不停的旋轉以凸顯其3D的魅力。

線上演示        原始碼下載

7、CSS3 3D進度條按鈕 18款精美樣式

我們在網頁上提交資料的時候經常會看到進度條,不過大部分進度條都是在網頁其他地方顯示,比如彈出一個視窗。這款CSS3實現的進度條是顯示在按鈕上的,可以更直觀的體現出使用者提交的進度情況,該CSS3進度條按鈕樣式非常漂亮,在支援3D的瀏覽器上還能有3D立體的效果,而且進度條展現形式很多,一共18種樣式。

線上演示        原始碼下載

8、HTML5/CSS3 3D立體功能按鈕 超酷CSS3按鈕

之前我們分享過很多精彩的CSS3按鈕,像這款純CSS3 3D牛奶樣式按鈕,非常酷,還有這款CSS3發光社會分享按鈕,也挺不錯的。今天要分享的這款CSS3 3D按鈕十分大氣,按鈕在點選的時候也有立體的效果,非常酷的一款CSS3 3D按鈕。

線上演示        原始碼下載

以上就是8款帥酷的HTML5/CSS3 3D動畫、圖片、選單應用,歡迎收藏分享。

本文轉載自:PHP100

評論(1)

相關文章