Polygon's PlayStation 4 Review
要实现上面酷炫的描边动画,首先我们需要了解 SVG 中实现描边动画的三个相关属性:分别是 stroke
、stroke-dasharray
、stroke-dashoffset
。这三个属性作为外观显示属性,都可以作为 CSS 属性来使用。
SVG 中的 stroke 属性用来控制绘制描边的方式,我们也可以使用 CSS 来控制 SVG 的描边样式。
https://codepen.io/xiaoluoboding/pen/pojavPr
我们知道在 CSS 中实现虚线边框,要使用 border: 1px dashed #f4a;
;在 SVG 中要实现虚线效果就要使用 stroke-dasharray
属性。
https://codepen.io/xiaoluoboding/pen/YzyePJP
stroke-dashoffset
属性用来指定路径从开始位置的偏移量。通过指定偏移量会让绘制好的线偏移
原来的位置一段空白