
Web 动画周报,一周一刊,每周一发布。让我们来一起聊聊 Web 动画,和它们背后的故事。
本期亮点:Unicar 为我们带来了他最新的 WebGL 动画,一个可以交互的鲤鱼荷塘。ChenXin 为我们展示了如何将一副静态的月色图变为一张有层次感的、可通过重力感应交互的 3D 图片。
周报将 Web 动画大致分为三类:CSS 动画、SVG 动画 和 WebGL/Canvas 动画。所有的动画将按类别展示,方便读者有针对性的学习。
CSS 动画

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

css transform
进行 z 方向的位移,这样离我们远的 div 看起来就会小,离我们进的看起来就会大,最后将这些 div 旋转起来就可以了。另外很重要的一点是,这个动画的 div 的背景图片设置的是一张 gif 动图,如果是静态图片的话就没有这么酷炫了。
2.《马蹄儿蹬蹬蹬》 作者:Steve Gardner

css animation
, 我们一起来看下这个动画的解构:

3. 《月色》 作者:陈鑫

css translateZ
进行位移,把第一层移到离我们最近,第四层离我们最远,这样层次感就出来了。然后如何添加重力感应呢?Web 里有一个叫做 deviceorientation
的事件,监听这个事件我们就能拿到设备的实时旋转角度,然后根据拿到的角度设置 css rotate
就可以了。不过需要注意的是,通常情况下浏览器向设备请求旋转角度都会被拒绝,所以一般要在浏览器里自己修改一下设置。
SVG 动画

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

3. 《深海》 作者:袁川

feTurbulence
和 feDisplacementMap
两种滤镜。对了,背景也不是一张图片,而是用 CSS 随机生成的。
WebGL / Canvas 动画

1.《焰火》 作者:Teejay Parker

2. 《鲤鱼荷塘》 作者:unicar

这一期的 Web 动画周报就到这里啦。如果你对周报有什么意见或者建议,欢迎在下方留言。你也可以向周报投稿,投稿的方式是把自己的动画的 Codepen 链接发送到周报下面的评论里即可。Web 动画周报,一周一刊,每周一发布,我们下周见!