利用H5SVG实现线性动画效果

效果图

这里写图片描述

原理

主要应用到了SVG的两个属性分别为: stroke-dasharray和stroke-dashoffset.

stroke-dasharray

strokedasharray属性用于创建虚线:下面来看看例子

1
2
3
4
5
6
7
8
9
10
11
12
path{
stroke: #000;
fill: transparent;
stroke-width: 2px;
stroke-dasharray: 10;
}
</style>
</head>
<body>
<svg width=500 height=500>
<path d="M 100 100 L 200 100"/>
</svg>

效果:
这里写图片描述
,当我们尝试增大stroke-dasharray时效果:
这里写图片描述
会发现放我们增大它的值时, 其中间的空白会变大吗,因此当我们把它设置成线长时并通过stroke-dashoffset就可以隐藏再通过CSS3就可以实现动画效果.

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
img{
border:0;
}
ol, ul ,li{list-style: none;}
path{
stroke: #000;
fill: transparent;
stroke-width: 2px;
stroke-dasharray: 10;
/* stroke-dashoffset: 100;
animation: dash 1s linear infinite alternate-reverse; */
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
</style>
</head>
<body>
<svg width=500 height=500>
<path d="M 100 100 L 200 100"/>
</svg>
</body>
</html>
越来越多的平台(微信公众平台,新浪微博,简书,百度打赏等)支持打赏功能,付费阅读时代越来越近,特此增加了打赏功能,支持微信打赏和支付宝打赏。坚持原创技术分享,您的支持将鼓励我继续创作!