解决方法@H_301_8@
要创建逐渐绘制其外部路径的圆,请使用SVG.
SVG的stroke-dasharray属性会将任何路径转换为虚线,您可以通过将虚线大小设置为与路径本身一样长的方式来利用它.
然后使用CSS动画逐渐更改stroke-dashoffset以围绕圆周边移动短划线.
circle {
fill: white;
stroke: black;
stroke-width: 2;
stroke-dasharray: 250;
stroke-dashoffset: 1000;
animation: rotate 5s linear infinite;
}
@keyframes rotate {
to {
stroke-dashoffset: 0;
}
}
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" />
</svg>
SVG的stroke-dasharray属性会将任何路径转换为虚线,您可以通过将虚线大小设置为与路径本身一样长的方式来利用它.
然后使用CSS动画逐渐更改stroke-dashoffset以围绕圆周边移动短划线.
circle {
fill: white;
stroke: black;
stroke-width: 2;
stroke-dasharray: 250;
stroke-dashoffset: 1000;
animation: rotate 5s linear infinite;
}
@keyframes rotate {
to {
stroke-dashoffset: 0;
}
}
<svg height="100" width="100"> <circle cx="50" cy="50" r="40" /> </svg>
