阅读 3285

《Web动画周报》第一期:好戏开场

Web动画周报

Web 动画周报创刊啦!收集最新鲜最优秀的 Web 动画,以周报的形式展示给大家。无论你是想精进动画技术的前端,还是想找寻灵感的设计师,抑或者只是单纯的想欣赏有趣的 Web 动画,你都不能错过 Web 动画周报!

Web 动画周报,一周一刊,每周五发布。让我们来一起聊聊 Web 动画,以及它们背后的故事。

周报将 Web 动画大致分为三类:CSS 动画、SVG 动画 和 WebGL/Canvas 动画。所有的动画将按类别展示,方便读者有针对性的学习。

css

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,也算是这个动画的致命缺陷吧。

svg

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 动画作品表现极其细腻且富有创意。(小编也是他的小迷弟额。)

webgl/canvas

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

关注下面的标签,发现更多相似文章
评论