Web 動畫週報創刊啦！收集最新鮮最優秀的 Web 動畫，以週報的形式展示給大家。無論你是想精進動畫技術的前端，還是想找尋靈感的設計師，抑或者只是單純的想欣賞有趣的 Web 動畫，你都不能錯過 Web 動畫週報！
Web 動畫週報，一週一刊，每週五發布。讓我們來一起聊聊 Web 動畫，以及它們背後的故事。
週報將 Web 動畫大致分為三類：CSS 動畫、SVG 動畫 和 WebGL/Canvas 動畫。所有的動畫將按類別展示，方便讀者有針對性的學習。
1. 《給個好評嘛》作者：Mert Cukuren
這是一個純 css 實現的動畫，
<label> 的背景圖片是星星，通過檢查
<input type="radio".../> 有沒有被 check 來控制
<label> 背景圖片的切換和表情的位移。
2. 《飯糰點心》 作者：Cassidy Williams
大家是不是感覺碗的顏色很有質感，那不是一張圖片哦。作者先在碗的
<div> 裡塞了一張全是灰色麻點的 .jpg 圖片當背景， 然後又在背景裡設定了
radial-gradient， 最後利用
background-blend-mode 將背景圖片與背景漸變 blend 到一起從而實現了你現在看到的效果。
3. 《矩陣數字雨》作者：袁川
幾天前袁川老師在推特上發帖，讓大家給出任一 css 屬性，他利用給出的屬性做一個動畫。於是大家開始了各路刁難。小編我當時給出的屬性是
writing-mode ，這幅就是利用
writing-mode 創作出的動畫作品。袁川老師是 css-doodle 庫的作者，擅長用 css 創作各類 generative art, 日常活躍在推特。（小編現在是袁川老師的小迷弟額。）
4. 《播放/暫停動畫》作者：dev_loop
一個很可愛的播放/暫停按鈕。
5. 《複合導航欄》作者：keyframers
很有趣的雙層效果。值得一提的是作者 keyframers 實際上是由 Shaw 和 David. K 共同主持的一個 web 動畫欄目。他們倆每週都會在 YouTube 給大家直播寫動畫。有興趣的同學可以去 YouTube 搜一搜。
6. 《圖片燃燒特效》作者：Jamie Coulter
看到這個動畫的第一反應：媽耶，好酷炫。然後一看程式碼：我的天吶，這個特效竟然是用 css 寫的！是的，這個特效是藉助
mix-blend-mode 完成的。不過這個動畫目前在普通的電腦上遠遠達不到60FPS，也算是這個動畫的致命缺陷吧。
1. 《傾斜的選單》作者：Mikael Ainalem
有趣的圖示與細膩的動畫。不過動畫大量的運用了
clip-path，因此不相容 IE 與舊的 Edge。小編在想這個動畫難道用
transfrom: skew 實現不了嗎，也沒有親自試過不好下定論，有興趣的同學可以自己試一試。
2. 《煎蛋按鈕》作者：Chris Gannon
其實這是一個2017年就完成的動畫，之所以現在還拿出來說是因為這是一個教科書級別的動畫。有趣的創意，細膩的動作解構，It has everthing! 小編第一次看到這個動畫的時候也就對著這個煎蛋點了500次吧。 值得一提的是這個動畫使用了 Adobe After Effects 的 bodymove 外掛，就是將動畫在先在 AE 裡錄製好，然後匯出為 JSON 檔案，再通過監聽事件控制動畫的播放。更值得一提的是這位動畫的作者 Chris Gannon 是一位 SVG 動畫大師，他的 SVG 動畫作品表現極其細膩且富有創意。（小編也是他的小迷弟額。)
1. 《霓虹載入條》 作者：Masuwa
這是一個使用了 three.js 的 3D WebGL 動畫，但是作者只給了一個 2D 視角。霓虹效果是通過 three.js 的後處理 UnrealBloomPass 實現的。Sin 和 Cos 的交融總是如此的美妙。不過小編在想，既然只需要 2D 視角的話，這個動畫用 CSS 應該也是可以實現的，霓虹效果可以使用 box-shadow，燈光可以通過 opacity 來調，還原度應該可以很高，有興趣的同學可以試一試。
2. 《虛假的陰影》 作者：Sean Codes
這是一個原生 2d Canvas 動畫作品，沒有使用任何的庫。通過監聽滑鼠的位置來動態的生成 Path 路徑，並填充顏色。可以說是一個很硬核的動畫了。
這一期的 Web 動畫週報就到這裡啦。如果你對週報有什麼意見或者建議，歡迎在下方留言。你也可以向週報投稿，投稿的方式是把自己的動畫的 Codepen 連結傳送到週報下面的評論裡即可。Web 動畫週報，一週一刊，每週五發布，我們下週見！