代码的核心思想就是:
path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear infinite;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
要弄懂stroke-dasharray和stroke-dashoffset之间的关系。
假设在一张宽10px的纸上画一条虚线很长虚线之间的间隔是50px的描边,这时候在纸上什么都看不到,如果在设置stroke-dashoffset的偏移量,慢慢一点点的偏移就能一点点的看到一个条展露出来的线段。这就是描边动画效果的原理。