《Web动画周报》第七期：水趣周报将 Web 动画大致分为三类：CSS 动画、SVG 动画和 WebGL/Canvas

Web 动画周报，一周一刊，每周一发布。让我们来一起聊聊 Web 动画，和它们背后的故事。

本期亮点：Lorenzo 把自己的电脑窗口变成了一个水缸，水缸中的水能根据窗口的移动而震荡，视觉效果满分。

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

CSS 动画

1. 《睡觉的蝙蝠》作者：Thiyagaraj

这是一个纯 CSS 动画，没有使用一张图片。动画的亮点除了画风治愈以外，还向大家展示了如何使用 CSS 绘制常见的几何图案，比如椭圆形、三角形、爱心形状等等。下面这个动画就向大家演示了如何用 CSS 画三角形。

2. 《日出》作者：David J. Aldred

这种波浪的感觉是怎么做的？看下面这个动图你就明白了：

另外，背景颜色的渐变是通过 CSS 滤镜完成的，滤镜名字叫做 filter: hue-rotate() 可以用来改变图片或者背景的颜色，这个属性是可以 animate 的。

3. 《逐渐生成的数字》作者：Adam Kuhn

这个动画使用了 grid 布局，每个数字都是由一个个的小方块拼凑起来的。作者为每种数字写一个单独的类来控制，由于数字一共只有 0-9 十种形状，所以也不会太繁琐。方格的出现和消失都是通过改变 clip-path 来实现的，也就是说，这里的每一个小方块都有自己的 clip-path。

4. 《舞动》作者：Sebastian Lenton

乍一看还以为是一个用 Three.js 写的 WebGL 动画（因为从材质上看起来就很像😂），但看了代码发现竟然是一个纯 CSS 动画。那些看上去非常 3D 小球其实是用 CSS 渐变画出来的，不过是作者将渐变用的炉火纯青才达到了这样以假乱真的效果。地面的倒影更是增强了这种 3D 的感觉。

SVG 动画

1. 《颜色浸染特效》作者：Mariusz Dabrowski

“Hover Me” 有两层，第一层是黑底白边的空心字样式，第二层是 SVG，是红底白字。在动画的一开始，用 mask 将 SVG 那一层遮盖出，这样我们只能看到黑底白边的那一层。当鼠标悬浮在字上时，使用 JS 获取到鼠标的位置，然后再动态的修改 mask 的位置，再给 mask 设置一个慢慢变大的动画，第二层就这样被慢慢显示出来了。