4.svg路径动画
2019-04-14 本文已影响0人
琉璃_xin
通过offset-path,offset-distance这两个属性，可以结合css来实现让一个元素沿着svg路径做一些动画的效果。
offset-path:css属性，表示元素的运动路径。
offset-distance: css属性，定义元素在路径上运动的距离（数值或百分比）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
svg{
position: absolute;
}
.rot{
width: 10px;
height: 10px;
background: pink;
border-radius: 100%;
offset-path: path('M 10 10 L 50 50, 20 30 l 30 60 H 100 V 80 C 120 90 ,120 100, 100 120 S 120 80, 100 140, A 30 50 -45 0 1 215 109');
offset-distance: 0%;
animation: rot 2s linear alternate infinite;
}
@keyframes rot { from { offset-distance: 0%; } to { offset-distance: 100%; } }
</style>
</head>
<body>
<svg version="1.1"
baseProfile="full"
width="600" height="600"
xmlns="http://www.w3.org/2000/svg">
<path d="M 10 10
L 50 50, 20 30
l 30 60
H 100
V 80
C 120 90 ,120 100, 100 120
S 120 80, 100 140,
A 30 50 -45 0 1 215 109" fill="none" stroke="red"/>
</svg>
<div class="rot"></div>
</body>
</html>
GIF.gif
