【HTML】SVG实现炫酷的描边动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>炫酷的描边动画SVG</title>
<style>
.st0 {
fill: none;
stroke: #215875;
stroke-width: 2;
stroke-miterlimit: 10;
stroke-dasharray: 226.2694392076422;
stroke-dashoffset: 226.2694392076422;
animation: draw 3s infinite linear;
}
@keyframes draw {
0% {
stroke-dashoffset: 226.2694392076422;
}
100% {
stroke-dashoffset: 0;
}
}
</style>
</head>
<body>
<svg width="100%" height="100%" viewBox="0 0 500 500" class="svg-content">
<path id="path" class="st0" d="M468.28,34.62l-107-48c-2.79-1.19-6.93-1.19-9.71,0L256,231.78,89.28,102.62c-2.79-1.19-6.93-1.19-9.71,0l-107,48
c-2.79,1.19-6.93,1.19-9.71,0L102.62,231.78l-48.54,107.28c-2.79,1.19-6.93,1.19-9.71,0L231.78,256l-107.28,48.54
c-2.79,1.19-6.93,1.19-9.71,0l-48.54-107.28L34.62,256c-2.79,1.19-6.93,1.19-9.71,0l-107-48C10.23,35.81,0,39.42,0,44.71
c0,5.3,10.23,10.59,25.5,10.59h107l48.54-107.28c2.79-1.19,6.93-1.19,9.71,0l107,48c2.79,1.19,6.93,1.19,9.71,0
l48.54-107.28,107,48c2.79,1.19,6.93,1.19,9.71,0l107-48C500,39.42,500,35.81,468.28,34.62z M250,468.28
c-105.77,0-191.55-85.78-191.55-191.55S144.23,32.72,250,32.72s191.55,85.78,191.55,191.55S355.77,468.28,250,468.28z"/>
</svg>
</body>
</html>这个代码实例展示了如何使用SVG和CSS创建一个描边动画。.st0类定义
评论已关闭