你的位置:首页 > 软件开发 > 网页设计 > SVG描边动画原理

SVG描边动画原理

发布时间:2016-08-01 00:00:04
描边动画原理,利用stroke-dasharray 使得实线虚线相间,stroke-dashoffset 使得虚线向开头偏移,这里的1000是随便取的,只要比路径长度大即可动画就是减少虚线偏移,那么实线就会慢慢漏出来了path { stroke-dasharray: 1 ...

描边动画原理,利用

stroke-dasharray 使得实线虚线相间,

stroke-dashoffset 使得虚线向开头偏移,这里的1000是随便取的,只要比路径长度大即可

动画就是减少虚线偏移,那么实线就会慢慢漏出来了

path {

  stroke-dasharray: 1000;

  stroke-dashoffset: 1000;

  animation: dash 5s linear infinite;

}

 

@keyframes dash {

  to {

    stroke-dashoffset: 0;

  }

}

JS获取长度

var path = document.querySelector('path');

var length = path.getTotalLength();


原标题:SVG描边动画原理

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录