蒙版对于UI设计师来说，太熟悉不过了，当然了，可能PS里面用的多一些，AI里面用的少一些，SVG同样支持蒙版，而且借助蒙版，能完成很多神奇的效果。我喜欢称蒙版动画为一种魔术，这是真正的“障眼法”，它只让你看到想要看到的部分。 前面SVG的动画效果里，有两次用过了蒙版，一个是在路径…

SVG 实战应用：使用 Web Animations API 来实现文字书写动画效果

先看一个动画效果，这种小飞机沿路径飞行(路径部分线段变成绿色是录屏软件出了问题)。 这种动画效果最常见于发送信息后，两个不同位置之间的导航指向等等，总之使用场景还是很多的。对于SVG动画来说，这种效果是最最简单不过，只需要一个路径外加几个属性的简单设置就能完成，简单到不算飞机图…

使用 SVG 的滤镜可以非常简单的实现一个沾粘（Gooey）动画效果。

路径动画的效果还是挺有意思的，而 Web 中常用的方法就是 SVG。先上一个效果图： SVG 要在 SVG 里面实现文字路径动画还是比较简单的，SVG 里面就有天然的支持。 我们先搞个 SVG 路径 <svg id="textPathDemo" xmlns="http://ww…

使用 SVG 蒙版 (mask) 实现视频填充文字效果

上篇：https://juejin.im/post/6844903477768896525 中篇：https://juejin.im/post/6844903477890514958 在前面两篇文章中，虽然完整描述了任意图形的变形动画实现方法，但最大的局限性显…

SVG是矢量图形表示，它的一个强大之处在于path标签可以表示任意的矢量形状，利用好这个path可以做出很多传统html/css做不出来的效果。下面举几个例子。 1. 做路径动画 利用animateMotion结合path做的动画，具体说明可见上文。 2. 实现不规则形状的点击…

期间收到了掘金小编承诺的福利，杯子和T，文末会晒。 最近对3D立方体的动画有点着魔，越玩越嗨，此状态不好，需警惕，那就告诫自己，最后一篇，然后立方体相关的就此封笔。<svg>有一个特有的动画属性是CSS3无可取代的，就是<animateMotion>，路径移动动画。也曾经特意写…