描边动画原理,利用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
(#换成@)。