《Web動畫週報》第一期：好戲開場

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 動畫週報，一週一刊，每週五發布，咱們下週見！