SVG描边动画

See the Pen jxPVEj by NINE (@sollrei) on CodePen.

图标是在阿里的iconfont里面随便翻的,下载的svg格式,描边动画需要有stroke

SVG的stroke属性

  • stroke 颜色
  • stroke-width 宽度
  • stroke-linecap 端点的表现
  • stroke-dasharray 虚线

描边动画重点在最后这个属性,SVG本身也可以用CSS属性控制

path {
    stroke-dasharray: 3000;
    stroke-dashoffset: 3000;
}

分别是虚线的分割和向左的位移,具体的到这里看REACT NATIVE SVG描边动画
控制位移从某个值变化到0,就会出现动画的效果

path {
    stroke-dasharray: 3000;
    stroke-dashoffset: 3000;
    animation: dash 3s ease-in-out infinite;
}
@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}

如果是多条路径依次出现,可以设置动画延迟

:root {
    --s-index: 10000;
}
path {
    stroke-dasharray: 3000;
    stroke-dashoffset: 3000;
    animation: dash 3s ease-in-out infinite;
    animation-delay: calc(var(--s-index) * .2s);
}
@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}
const path = document.querySelectorAll('path');
for (let i = 0, l = path.length; i <= l; i += 1) {
    const p = path[i];
    p.style.setProperty('--s-index', i);
}

这里用了CSS变量,方便好用只是IE要呵呵

Comments
Write a Comment