通过csv实现 A rx ry x-axis-rotation large-arc-flag sweep-flag x y
A rx(x半径) ry(y半径) x-axis-rotation(旋转角度) large-arc-flag(角度大小，0表示小角度，1表示s大角度) sweep-flag(弧线方向) x(结束的x坐标) y(结束的y坐标)
.box {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: red;
/* A rx(x半径) ry(y半径) x-axis-rotation(旋转角度) large-arc-flag(角度大小，0表示小角度，1表示s大角度) sweep-flag(弧线方向) x(结束的x坐标) y(结束的y坐标) */
offset-path: path("M 150 0 A 150 150 0 0 0 0 150"); /* 重点 */
animation: qiu 2s infinite; /* 重点 */
}
@keyframes qiu {
100% {
offset-distance: 100%;
opacity: 0;
}
}<body>
<div class="box"></div>
<svg width="150" height="150" xmlns="http://www.w3.org/2000/svg">
<path d="
M 150 150
L 0 150
A 150 150 0 0 1 150 0
" stroke="#fff" fill="none" />
</svg>
</body>
899
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
