演示

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/74b95916-d2a5-4ff5-88f7-7c2cdc8c6cfc/ps4.gif

Polygon's PlayStation 4 Review

vivus.js - svg animation

原理

要实现上面酷炫的描边动画,首先我们需要了解 SVG 中实现描边动画的三个相关属性:分别是 strokestroke-dasharraystroke-dashoffset。这三个属性作为外观显示属性,都可以作为 CSS 属性来使用。

stroke

SVG 中的 stroke 属性用来控制绘制描边的方式,我们也可以使用 CSS 来控制 SVG 的描边样式。

https://codepen.io/xiaoluoboding/pen/pojavPr

stroke-dasharray

我们知道在 CSS 中实现虚线边框,要使用 border: 1px dashed #f4a; ;在 SVG 中要实现虚线效果就要使用 stroke-dasharray 属性。

https://codepen.io/xiaoluoboding/pen/YzyePJP

stroke-dashoffset

stroke-dashoffset 属性用来指定路径从开始位置的偏移量。通过指定偏移量会让绘制好的线偏移

原来的位置一段空白