参考 - stroke-dasharray - stroke-dashoffst - 纯CSS实现帅气的SVG路径描边动画效果stroke-dasharray用来设置虚线，用“，”分隔的数字表示“实线，空”，stroke-dasharray=”5, 5” 。如果数字是奇数个的话，则自动补充为偶数。如 stroke-dasharray=”5,3,2” 实际为 “5,3,2,5,3,2”.st
参考
- stroke-dasharray
- stroke-dashoffst
- 纯CSS实现帅气的SVG路径描边动画效果
- stroke-dasharray用来设置虚线，用“，”分隔的数字表示“实线，空”，stroke-dasharray=”5, 5” 。如果数字是奇数个的话，则自动补充为偶数。如 stroke-dasharray=”5,3,2” 实际为 “5,3,2,5,3,2”.
- stroke-dashoffset用来表示偏移。
制作动画的思路：将stroke-dasharray设置为“线段总长”，并将偏移设置为线段总长。这样在初始状态下线段是看不见的。接下来即可使用css动画改变stroke-dashoffset的值，线段即可逐渐显现出来。
下面用stroke-dasharray和stroke-dashoffset来给下图添加一个动画。
完整代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
最低0.47元/天 解锁文章
6207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
