《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 动画周报，一周一刊，每周五发布，我们下周见！