直线线条动画
svg #path {
stroke-dashoffset: 1000;
animation: dash 4s linear forwards;
}
@keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
虚线线条动画
curPath.setAttribute('stroke', '#379FFE')
curPath.setAttribute('stroke-width', '3')
curPath.setAttribute('fill', 'none')
// 虚线长度空白长度
curPath.setAttribute('stroke-dasharray', '6 4')
let num = 0
timer = setInterval(function () {
num++
// 正负可以控制线条流动方向
curPath.setAttribute('stroke-dashoffset', -num)
}, 100)