CSS三、SVG、Canvas、WebGL動畫精選整理

1、CSS3動畫

名稱	用途	連接
陰影波紋特效	1.元素hover效果 2.突出表現效果	http://www.jq22.com/code80
橫板導航菜單動畫	導航菜單	http://www.jq22.com/code181
橫板導航菜單動畫2	導航菜單	http://www.jq22.com/code195
豎板導航菜單動畫	導航菜單	http://www.jq22.com/code480
圓形導航菜單動畫	導航菜單	http://www.jq22.com/code816
環形導航菜單動畫	導航菜單	http://www.jq22.com/code681
三角形導航菜單動畫	導航菜單	http://www.jq22.com/code621
圖標按鈕特效	收藏、喜歡、書籤按鈕	http://www.jq22.com/code278
「喜歡」按鈕點擊特效	喜歡、點贊按鈕	http://www.jq22.com/code435
Twitter點贊動畫	喜歡、點贊按鈕	http://www.jq22.com/code221
下拉列表特效	下拉列表	http://www.jq22.com/code115
導航菜單下劃線跟隨鼠標	導航菜單	http://www.jq22.com/code805
導航菜單下劃線跟隨鼠標2	導航菜單	http://www.jq22.com/code809
導航菜單下劃線跟隨鼠標3	導航菜單	http://www.jq22.com/code604
彩虹預加載動畫	Loading動畫	http://www.jq22.com/code811
旋轉加載動畫	Loading動畫	http://www.jq22.com/code696
旋轉加載動畫2	Loading動畫	http://www.jq22.com/code591
小球旋轉加載動畫	Loading動畫	http://www.jq22.com/code515
小球旋轉加載動畫2	Loading動畫	http://www.jq22.com/code171
小球跳動加載動畫	Loading動畫	http://www.jq22.com/code538
Android 牛軋糖加載動畫	Loading動畫	http://www.jq22.com/code496
按鈕遮罩動畫	模仿Material Design按鈕點擊Ripple效果	http://www.jq22.com/code798
按鈕遮罩動畫2	按鈕hover效果	http://www.jq22.com/code718
按鈕遮罩動畫3	模仿Material Design按鈕點擊Ripple效果	http://www.jq22.com/code676
按鈕懸停動畫	按鈕、連接的懸停效果	http://www.jq22.com/code795
按鈕懸停動畫2	按鈕的懸停效果	http://www.jq22.com/code678
按鈕懸停動畫3	按鈕的懸停效果	http://www.jq22.com/code638
按鈕懸停動畫4	按鈕的懸停效果	http://www.jq22.com/code482
文字遮罩動畫	文字的懸停效果	http://www.jq22.com/code391
按鈕背景滑動動畫	1.默認按鈕的展示 2.按鈕hover效果	http://www.jq22.com/code782
div+css偷窺的小狗	Loading動畫	http://www.jq22.com/code776
div+css顛倒的貓	Loading動畫	http://www.jq22.com/code546
div+css氣球動畫	頁面背景	http://www.jq22.com/code661
switch切換按鈕	switch切換按鈕	http://www.jq22.com/code770
翻轉效果的switch切換按鈕	switch切換按鈕	http://www.jq22.com/code174
標題滾動動畫	頁面標題排比句	http://www.jq22.com/code764
定向感知hover懸停	展現欄hover效果	http://www.jq22.com/code758
頁面滾動延遲	長頁面各個section的切換	http://www.jq22.com/code734
卡片3D視差	頁面banner	http://www.jq22.com/code717
卡片3D視差2	帶背景圖片的卡片元素	http://www.jq22.com/code608
卡片和文件夾動畫	能夠收起的卡片元素	http://www.jq22.com/code414
文字模糊動畫	文字展現	http://www.jq22.com/code695
文字填充動畫	文字展現	http://www.jq22.com/code445
文字亂碼動畫	文字展現	http://www.jq22.com/code431
3D選項卡	選項卡	http://www.jq22.com/code650
3D翻轉卡	卡片元素的翻轉	http://www.jq22.com/code630
3D翻轉卡2	卡片元素的翻轉	http://www.jq22.com/code436
3D旋轉卡	卡片元素的hover效果	http://www.jq22.com/code572
文本框得到焦點的動畫	表單	http://www.jq22.com/code585
選項卡的豎直手風琴效果	頁面banner	http://www.jq22.com/code551
天氣圖標動畫	天氣預報	http://www.jq22.com/code542
喜怒無常的氣球滑塊	用戶體驗調查滑塊等	http://www.jq22.com/code403
表情變化動畫	用戶體驗調查	http://www.jq22.com/code255
谷歌滑塊	滑塊	http://www.jq22.com/code335
img的hover效果	圖片展現欄的hover效果	http://www.jq22.com/code365
通知彈出效果	UI底邊欄的通知彈出	http://www.jq22.com/code300
圓形卡片式工具欄	工具\操做欄	http://www.jq22.com/code298
可拖動排序的列表	可拖動排序的列表	http://www.jq22.com/code222
工具欄動畫	剪切、複製、刪除、分享按鈕動畫	http://www.jq22.com/code101
banner切換動畫	頁面banner下方小圓點	http://www.jq22.com/code145
彈性下拉刷新	頁面下拉刷新	http://www.jq22.com/code79

 

2、SVG動畫

名稱	用途	連接
Low poly背景生成	頁面背景	http://www.jq22.com/code790
粘性懸停菜單	導航菜單	http://www.jq22.com/code470
天氣圖標動畫	天氣預報	http://www.jq22.com/code768
文本筆畫動畫	頁面標題	http://www.jq22.com/code712
404動畫	404頁面背景	http://www.jq22.com/code642
漢堡按鈕動畫	導航欄漢堡按鈕	http://www.jq22.com/code594
音量控制欄	音量控制欄	http://www.jq22.com/code461
提交按鈕動畫	表單提交按鈕	http://www.jq22.com/code343
6個動畫圖標	動畫圖標	http://www.jq22.com/code168
svg圖表	折線圖	http://www.jq22.com/code124

 

3、Canvas動畫

名稱	用途	連接
兩點之間相鏈接的動畫	1.流程圖 2.餅形圖的標註	http://www.jq22.com/code801
圖像模糊加載	圖片	http://www.jq22.com/code574
多點二次曲線動畫	1.折線圖動畫	http://www.jq22.com/code22

 

4、Canvas+WebGL動畫

名稱	用途	連接
土星動畫	1.Loading動畫 2.歡迎界面	http://www.jq22.com/code802
絲帶旋轉動畫	Loading動畫	http://www.jq22.com/code372
模擬雲	頁面背景	http://gnipbao.github.io/css3-test/src/WebGL-demo/clouds/index.html

 

5、其餘css+js應用

名稱	用途	連接
標頭懸浮	長頁面各個section的標頭懸浮	http://www.jq22.com/code804
滾動視差	頁面下滑時的僞3D效果	http://www.jq22.com/code799
文字輸入動畫	文字展現效果	http://www.jq22.com/code719
支持新增、刪除的列表框	列表框	http://www.jq22.com/code702
d3.js環形進度條	進度條	http://www.jq22.com/code674
純css3環形進度條	進度條	http://www.jq22.com/code618
純css3環形進度條2	進度條	http://www.jq22.com/code590
基於光標位置的塊陰影	元素陰影	http://www.jq22.com/code644
註冊、登陸、密碼重設的界面組合	註冊、登陸、密碼重設界面	http://www.jq22.com/code629
分步驟填寫的表單	分步驟填寫的表單	http://www.jq22.com/code540
React + Redux 待辦事項應用	1.待辦事項 2.列表框	http://www.jq22.com/code626
React + Redux 待辦事項應用2	1.待辦事項 2.列表框	http://www.jq22.com/code332
紙片對話框	對話框	http://www.jq22.com/code624
卡片角標	卡片元素的角標	http://www.jq22.com/code620
文件樹	文件樹	http://www.jq22.com/code619
麪包屑導航	麪包屑導航	http://www.jq22.com/code596
卡片切換動畫	卡片元素的切換	http://www.jq22.com/code511
氣泡三角形	氣泡邊緣的三角形	http://www.jq22.com/code425
css綜合UI	1.導航欄 2.工具條 3.Swicth複選框	http://www.jq22.com/code360
css控件組	1.CheckBox 2.Radio	http://www.jq22.com/code330
均衡器	1.播放器的均衡器 2.曲線圖表	http://www.jq22.com/code321
帶有刪除線動畫的複選框	複選框	http://www.jq22.com/code316
反饋表情	用戶體驗調查	http://www.jq22.com/code314
css日曆	日曆控件	http://www.jq22.com/code177
帶有功能的下拉列表	帶有功能的下拉列表	http://www.jq22.com/code146