你的位置:首页 > 网页设计

[网页设计]SVG描边动画原理


描边动画原理,利用

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();