代码的核心思想就是:
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的偏移量,慢慢一点点的偏移就能一点点的看到一个条展露出来的线段。这就是描边动画效果的原理。