《Web动画周报》第五期：当心驾驶

时间 2019-11-05

标签 Web动画周报第五当心驾驶栏目 HTML 繁體版

原文原文链接

Web 动画周报，一周一刊，每周一发布。让咱们来一块儿聊聊 Web 动画，和它们背后的故事。ios

本期亮点：Jon Kantner 为咱们带来了他最新的 Three.js 小游戏《高速公路竞赛》，控制本身的汽车，一块儿在高速公路上飞驰吧！注意不要撞车哦。canvas

周报将 Web 动画大体分为三类：CSS 动画、SVG 动画和 WebGL/Canvas 动画。全部的动画将按类别展现，方便读者有针对性的学习。post

CSS 动画

1. 《旋转的圆圈》做者：Miracle Onyenma

这是一个纯 CSS 动画，并且做者没有使用任何的 CSS 3D 属性，靠着 2D transform 完成了一个带有三维错觉的动画。影子的巧妙使用很大程度上加强了 3D 的感受。

2. 《相位》做者：Adam Dipinto

一个很适合用来看成加载动画的 CSS 3D 动画。圆圈其实就是 border 画的，在动的属性是 z 方向的位移，经过给每一个圆圈设置不一样的 animation-delay 实现相似弹簧的动画效果。

3. 《切换预览动画》做者：Mariusz Dabrowski

一个很是精致的切换动画，动画干净整洁，没有拖泥带水，还适配了移动端。控制逻辑是用 JS 写的，使用了一个叫作 GSAP 的动画库。GSAP 应该是目前在实际业务中用得最多的动画库了，不少写动画的大佬都推荐过，有兴趣的有同窗能够去了解一下。这个动画库最大的特色是 API 设计很是人性化，好学易懂，但功能又很是强大。GSAP 这个库有目前有三我的在全职维护，因此不用担忧会忽然中止更新或者死掉，可是正由于是全职维护的缘由，有些功能是须要收费的，不过免费版本足够知足通常的平常需求。

4. 《流星》做者：Yusuke Nakaya

这是一个纯 CSS 动画，为元素的巧妙使用让每一颗流星都只使用了一个 <div> 元素。做者还使用了 filter: drop-shadow() 这个 CSS 滤镜让流星看起来有在发光的感受。 filter: drop-shadow() 的做用跟 box-shadow 很类似：都是为元素添加阴影。可是 filter: drop-shadow() 做为 CSS 滤镜效果的一种，相比于 box-shadow 的好处就是在这个滤镜下的全部元素都会被添加上阴影，这样咱们就不须要像 box-shadow 那样一个一个的去加了。