《Web动画周报》第六期：荷塘月色周报将 Web 动画大致分为三类：CSS 动画、SVG 动画和 WebGL/Canv

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

本期亮点：Unicar 为我们带来了他最新的 WebGL 动画，一个可以交互的鲤鱼荷塘。ChenXin 为我们展示了如何将一副静态的月色图变为一张有层次感的、可通过重力感应交互的 3D 图片。

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

CSS 动画

1. 《CSS 3D 变换》作者：Neil McCallion

如此酷炫的幻影动画小编还是第一次见😂 其实原理很简单，就是画很多个 div 元素，然后把这些 div 元素进行用 css transform 进行 z 方向的位移，这样离我们远的 div 看起来就会小，离我们进的看起来就会大，最后将这些 div 旋转起来就可以了。另外很重要的一点是，这个动画的 div 的背景图片设置的是一张 gif 动图，如果是静态图片的话就没有这么酷炫了。

2.《马蹄儿蹬蹬蹬》作者：Steve Gardner

妈妈问我为什么跪着看动画系列。这是一个纯 CSS 动画，整匹马由无数个几何形状拼接而成，每个几个形状都有自己的 css animation, 我们一起来看下这个动画的解构：

作者将一张静态图片改成了一张带有 3D 特效的图片，还添加了重力感应。如何将静态平面图改成带有层次感的 3D 图片？先将静态图分解，按距离远近分类，将距离相同的物体放在同一个图层上。比如这个动画就有四个图层：前面的云和比较大的星星为第一层，也是视觉上里我们最近的一层，月亮为第二层，后排的云和小星星为第三层，深蓝色的背景为第四层，第四层是离我们最远的一层。将每一层设置为一个 div 元素的背景，然后利用 css translateZ 进行位移，把第一层移到离我们最近，第四层离我们最远，这样层次感就出来了。然后如何添加重力感应呢？Web 里有一个叫做 deviceorientation 的事件，监听这个事件我们就能拿到设备的实时旋转角度，然后根据拿到的角度设置 css rotate 就可以了。不过需要注意的是，通常情况下浏览器向设备请求旋转角度都会被拒绝，所以一般要在浏览器里自己修改一下设置。

SVG 动画

2. 《几何心碎》作者：Ryan Zola

爱心由一个个的三角形拼接而成，碎裂的动画其实就是让这些三角形进行随机的位移。看起来很复杂，但因为路径都是随机的，所以代码并不会很复杂。另外有一个小细节就是，在爱心破碎之后为碎片加上一个高斯模糊的滤镜，这样让人感觉碎片真的像飞到了眼前一样。

3. 《深海》作者：袁川

这个动画可不是简单的 png 图片的位移哦，如果你仔细看每一条鳐鱼，你就会发现它们是有波浪感的。这种破浪感是通过 SVG 滤镜来实现的，作者混合了 feTurbulence 和 feDisplacementMap 两种滤镜。对了，背景也不是一张图片，而是用 CSS 随机生成的。

WebGL / Canvas 动画

1.《焰火》作者：Teejay Parker

这个焰火动画算是众多焰火动画中比较优秀的了，动画有很多细节，比如焰火不是竖直着飞上天空的，而是打着旋儿飞上去的，这个飞上去的旋转路径用到了 SVG 的 Path。另外焰火的种类也很多，虽然 GIF 中没有呈现出来，但是你如果点进链接，观察一段时间就会发现有很多种焰火。不过小编觉得焰火的颜色还可以再斟酌一下，目前的颜色搭配并不是很和谐。