11個超震撼的HTML5和純CSS3動畫源碼

時間 2019-11-06

標籤震撼 html5 html css3 css 動畫源碼欄目 HTML5 简体版

原文原文鏈接

1.jQuery多功能手風琴我的信息菜單面板

這是一款基於jQuery的手風琴我的信息菜單面板，每個菜單項展開後能夠自定義佈局，所以能夠爲每個菜單項實現多功能。相似這樣的多功能菜單還有jQuery/CSS3大屏下拉菜單，很是實用。因爲這款手風琴菜單是基於jQuery框架的，所以兼容性和實用性很強。css

在線演示html

源碼下載html5

2.純CSS3水平手風琴分享按鈕菜單

對於手風琴動畫，咱們之前分享過不少，有基於jQuery的手風琴菜單，好比jQuery多層級垂直手風琴菜單；也有基於jQuery的手風琴焦點圖，好比jQuery實現橫向手風琴圖片輪播焦點圖效果。今天要分享的是一款利用純CSS3實現的水平手風琴分享按鈕菜單，每個分享按鈕展開時會有該平臺的簡單介紹，很是絢麗實用。jquery

在線演示css3

源碼下載web

3.HTML5 WebGL粒子爆炸動畫

以前咱們分享過幾款很是炫酷的HTML5粒子動畫，好比這款HTML5像素粉碎圖片動畫和HTML5 Canvas彩色像素進度條動畫，都是利用了HTML5的粒子渲染特性實現。今天咱們要分享另一款基於HTML5和WebGL的粒子爆炸動畫特效，效果很是使人震撼。canvas

在線演示框架

源碼下載ide

4.超酷逼真的CSS3 3D書本翻頁動畫

以前咱們分享過好幾款風格各異的jQuery書本翻頁插件和HTML5書本翻頁動畫，有幾個仍是不錯的，好比jQuery書本翻頁3D動畫特效和HTML5 3D書本翻頁特效。今天要分享的也是一款基於CSS3的3D書本翻頁動畫，目前這個動畫不支持鼠標交互，只能夠自動將頁面打開和收攏。svg

在線演示

源碼下載

5.超實用的jQuery淡入淡出焦點圖插件帶3D相框

這是一款基於jQuery和CSS3的焦點圖插件，這款焦點圖的設計很是簡單，僅僅是自動播放一系列相片，相片在切換的時候帶有淡入淡出的動畫特效，使用起來也十分方便。另一個特色是，這款jQuery焦點圖插件的相片外框呈現3D的效果，配合黑色的背景顯得很是立體大氣。

在線演示

源碼下載

6.HTML5 Canvas人物四肢模擬及身體碰撞動畫

前幾天咱們剛剛爲你們分享過一款基於HTML5的人物四肢關節伸展模擬動畫，它能夠模擬人物的頭部、四肢伸展狀況，至關逼真。今天要介紹的這款HTML5 Canvas動畫在原來四肢模擬的基礎上，添加了身體碰撞模擬的動畫特效，咱們用鼠標模擬一個大鐵球，移動鼠標後將大鐵球撞擊人物的身體，人物身體受到做用力後就會按必定方向進行翻轉活動，所以四肢也隨着伸展和擺動。固然這種動畫也應用了HTML5的重力感應特性。這種相似的動畫之前也介紹過一些，好比HTML5圖片相冊重力感應特效。

在線演示

源碼下載

7.HTML5點陣列局部放大鏡動畫特效

記得之前咱們分享過一款很酷的HTML5 3D 粒子波浪動畫特效，它由一連串點陣列組成，3D效果很是炫酷。今天要介紹的也是一個基於HTML5的點陣列動畫特效，當鼠標滑過陣列時，陣列圖的局部將產生放大鏡的動畫特效，也具備極強的3D立體視覺效果。

在線演示

源碼下載

8.純CSS3實現可感知方向的卡片翻轉動畫

今天咱們要給你們分享一個看似簡單但卻很是有趣的純CSS3動畫特效，當咱們將鼠標滑過一個個卡片時，卡片能夠進行翻轉，這個應該很容易，並且也很常見，你必定會說，這種翻轉動畫隨便用CSS3特性就能夠實現了。可是這款CSS3卡片翻轉動畫有一個獨有的特色，就是它能夠感知翻轉的方向，也就是說它能夠根據用戶鼠標滑過的方向來決定翻轉的角度，好比鼠標從上往下滑過，那卡片就垂直翻轉，若是鼠標從左往右滑過，那卡片就水平翻轉。你能夠去研究一下它的CSS源碼，對你學習CSS3會有很大的幫助。

在線演示

源碼下載