英文 | https://niemvuilaptrinh.medium.com/24-css-javascript-animation-effects-a4c5b6e98a59
翻譯 | 楊小愛
在昨天的文章中，我跟大家分享了《40個适合初學者練習HTML和CSS的案例》，錯過的小夥伴們，請自行點選檢視學習。
而在今天的内容中，我将繼續為大家分享一些練習案例，24個CSS及JavaScript建構和設計的CSS 和 Javascript 動畫效果。
希望對于找不到地方練習的小夥伴，這些案例可以幫助你進行刻意練習學習。
現在，我們就開始今天的内容吧。
01、CSS文字動畫效果
Demo位址：https://codepen.io/Sonick/pen/HthaI
02、CSS動畫懸停導航
Demo位址：https://codepen.io/EvyatarDa/pen/waKXMd
03、CSS文本動畫
Demo位址：https://codepen.io/yoannhel/pen/sJpDj
04、CSS漸變動畫背景
Demo位址：https://codepen.io/P1N2O/pen/pyBNzX
05、CSS 3D懸停效果
Demo位址：https://codepen.io/noeldelgado/pen/pGwFx
06、CSS模态動畫
Demo位址：https://codepen.io/designcouch/pen/obvKxm
07、文字粒子動畫效果
Demo位址：https://codepen.io/z-/pen/bpxgWZ
08、CSS糖果色按鈕動畫
Demo位址：https://codepen.io/yuhomyan/pen/OJMejWJ
09、CSS手風琴效果
Demo位址：https://codepen.io/abergin/pen/ihlDf
10、CSS3 加載動畫
Demo位址：https://codepen.io/Manoz/pen/pydxK
11、漢堡動畫菜單
Demo位址：https://codepen.io/kylehenwood/pen/Alayb
12、CSS頭像圖示浮動效果
Demo位址：https://codepen.io/MarioDesigns/pen/woJgeo
13、CSS懸停動畫
Demo位址：https://codepen.io/caraujo/pen/VYOjNM
14、CSS圓圈進度條動畫
Demo位址：https://codepen.io/kyledws/pen/Gvelt
15、CSS波浪效果
Demo位址：https://codepen.io/goodkatz/pen/LYPGxQz
16、CSS頁面滾動動畫
Demo位址：https://codepen.io/jlnljn/pen/bgjbmB
17、CSS複選框動畫
Demo位址：https://codepen.io/shshaw/pen/WXMdwE
18、滑塊動畫效果
Demo位址：https://codepen.io/ettrics/pen/WvoRQo
19、CSS提示工具平滑懸停效果
Demo位址：https://codepen.io/linux/pen/xrEjaK
20、星級評定動畫
Demo位址：https://codepen.io/aaroniker/pen/XWrxyRJ
21、CSS背景動畫
Demo位址：https://codepen.io/mohaiman/pen/MQqMyo
22、無限輪播動畫
Demo位址：https://codepen.io/studiojvla/pen/qVbQqW
23、動畫登陸表單效果
Demo位址：https://codepen.io/boudra/pen/YXzLBN
24、CSS動畫漸變邊框效果
Demo位址：https://codepen.io/mike-schultz/pen/NgQvGO
總結
今天分享的内容，到這裡就已經結束了，感謝您的閱讀，如果您覺得今天分享的内容對您有所幫助，請記得給我點個贊。