素材整理 | 楊小二
前言
在之前的文章中，我也跟大家分享過關于CSS3以及HTML5制作的一些動畫效果，雖然這些動畫效果，可能在實際項目中根本不會應用到，但是，我們通過這些練習，可以幫助我們更好的了解與掌握CSS3與HTML5的相關知識。
是以，在這一期的《web素材》中，我為大家準備了13款HTML5實作的動畫執行個體，大家可以根據自己的需要，自行下載下傳練習。
01、酷炫的天體木星動畫特效
因為這個動畫檔案實在太大了，所有就截圖了，如果你有興趣的話，可以下載下傳，自行浏覽學習，這個是html5基于three繪制宇宙銀河系行星天體圍繞旋轉動畫，木星旋轉動畫特效，也支援全屏預覽。
下載下傳位址：https://089u.com/f/21793581-502643588-a78bf9
（密碼：2698）
02、發光的線條愛心形狀動畫特效
html5基于webgl制作酷炫發光的線條愛心輪廓形狀動畫，線條繪制愛心動畫特效。
下載下傳位址：https://089u.com/f/21793581-502643590-0a5efc
（密碼：2698）
03、創意的貪吃蛇svg動畫特效
這個是基于canvas繪制卡通可愛的貪吃蛇來回遊走動畫，矢量的貪吃蛇網頁動畫特效，滑鼠或手指移動控制貪吃蛇速度，可在手機端展示。
下載下傳位址：https://089u.com/f/21793581-502643592-b11436
（密碼：2698）
04、彩色的宇宙星雲canvas動畫特效
H5基于canvas制作全屏的彩色圓點粒子旋轉，銀河系星雲粒子動畫特效。
下載下傳位址：https://089u.com/f/21793581-502643594-982922
（密碼：2698）
05、菱形圖案彩色圓球動畫特效
H5基于canvas繪制多種顔色的菱形圖案組成的圓球變色動畫。支援單擊網頁暫停或開始動畫特效。
下載下傳位址：https://089u.com/f/21793581-502643596-981e76
（密碼：2698）
06、全屏透明的雪花片狀掉落動畫特效
gsap基于svg制作全屏透明的下雪雪花飄落，白色的雪花片狀一片片掉落背景動畫特效，點選網頁可停止或開始。
下載下傳位址：https://089u.com/f/21793581-502643598-272faa
（密碼：2698）
07、酷炫的三角形圖案動畫特效
基于canvas制作三角形花紋旋轉變形圖案動畫，三角形結構背景動畫特效。
下載下傳位址：https://089u.com/f/21793581-502643600-ec5e1a
（密碼：2698）
08、藍色線條六角形動畫特效
基于canvas繪制藍色酷炫的六角形旋轉變形動畫，線條結構的六角形圖形動畫特效。
下載下傳位址：https://089u.com/f/21793581-502643602-66673e
（密碼：2698）
09、雲霧狀文字3D動畫切換特效
基于canvas繪制白色雲霧狀的粒子文字3d動畫自動切換，支援自定義各種字元文字動畫切換特效。
下載下傳位址：https://089u.com/f/21793581-502643604-2bea4c
（密碼：2698）
10、遊走的魚群canvas動畫
這是一個基于jquery插件魚群canvas動畫，它使用create.js庫将html5畫布元素轉換為可配置參數遊泳速度，減速，弧度，轉動頻率，魚的數量，魚大小，遊泳周期，顔色等互動式的魚群動畫。
下載下傳位址：https://089u.com/f/21793581-502643606-046f39
（密碼：2698）
11、canvas畫布千紙鶴動畫特效
基于canvas 2D畫布繪制飛行的千紙鶴背景動畫特效。
下載下傳位址：https://089u.com/f/21793581-502643608-13b551
（密碼：2698）
12、html5 svg愛心圓圈動畫特效
基于svg繪制彩色的愛心圓圈慢慢變大循環動畫背景特效。
下載下傳位址：https://089u.com/f/21793581-502643610-2d4928
（密碼：2698）
13、canvas繪制幾何圖形密集動畫特效
canvas彩色密集的幾何圖形放大縮小動畫特效。單擊可更改。
下載下傳位址：https://089u.com/f/21793581-502643612-f059a8
（密碼：2698）
總結
到這裡，這期分享的13款動畫執行個體，就全部分享完畢了。
學習更多技能
請點選下方公衆号