校長：阿不思·鄧布bai利多

親愛的少年：我們愉快地通知您，您已獲準在CSS魔法學校就讀。特此帶給你一份CSS魔法祕籍，程式碼簡單，支援個性化定製。學期定於今日開始，我們將在此靜候您的貓頭鷹帶來您的回信。(所有配圖都是gif動圖，如果看到圖不動，耐心等待一小會，載入可能稍慢)。

1 煙花模擬器

通過HTML5實現的一款可線上定製的煙花模擬器，[p]暫停煙花綻放，[o]觸發選單顯示，[esc]退出選單。

2 Falling Hours

通過Canvas實現有創意的掉落時間。時分秒的數字從頁面上方掉落，有重力感應、碰撞、彈跳等效果。當然計時也是準確的！

3Bubbles in text

通過CSS3 實現文字內的泡沫漂浮動畫效果。

4 發光字母牆

通過jQuery實現可亮燈的字母牆。輸入法調英文，不要大寫鎖定，摁下任意英文字母，對應字母的燈會亮。摁下【enter】有驚喜。

5浩瀚星空

通過jQuery和CSS3實現的繁星點點動畫背景。星星在動哦~星星的顏色和數量均可調，原始碼執行後，pc端看會很震撼。

6精靈塵土

通過HTML5和Canvas，實現魔法粉末的文字特效。輸入文字時，觸發粉末化動畫特效。本質上是一款canvas的粒子動畫。可以用來模擬在黑板上用粉筆寫字所產生的粉塵飄飛的效果。

7Animated Water and Fish

通過 CSS3實現小魚在魚缸中游動的動畫。小魚和泡泡是純CSS構建，背景和櫃子使用背景圖片實現。

8 流星雨

通過 CSS3流星雨掉落動畫，box-shadow實現流星的光暈，使用偽元素實現拖尾。

9 心語星願

通過 Canvas實現漸變色深藍星空和飄散的五角星，滑鼠點選隨機生成一組五角星飄落。

10氣球海

節日歡慶彩色氣球放飛動畫，使用Canvas 貝塞爾曲線繪製的氣球形狀的元素，並應用了徑向漸變。可用於節日慶賀、生日祝福的專題頁面。

11 模擬太陽系

純CSS實現逼真的3D版本太陽系運轉動畫。只要你不困，它會一直陪你轉。

12 Glowing Meteor

通過HTML5和CSS3實現的發光的流星娃娃。

看了這麼多好玩的動效，你鐘意哪一款呢？文章中配圖效果略顯粗糙，原始碼執行更細膩一些。可以放到個人部落格或個人網站中作為點綴。

如果魔法還沒完全學會，沒關係，【點選這裡】獲取原始碼。獲取更全更新文章，可微信搜【前端便利貼】或掃描下方二維碼關注公棕號，同名推文【閱讀原文】中也可獲取原始碼。檔案-右鍵-開啟方式-任意瀏覽器開啟，即可看到比圖中更美麗的效果啦~

這裡就是哆啦A夢的百寶袋，總會有你喜歡的，也許今天，也許明天，也許後天...