CSS 오프셋 경로(동작 경로)를 사용하여 원형 경로에서 요소를 이동하는 방법은 무엇입니까?

<시간/>

CSS offset-path를 사용하여 요소의 모션 경로를 정의할 수 있습니다. 재산.

CSS offset-path 속성의 구문은 다음과 같습니다 -

구문

Selector {
   offset-path: /*value*/
}

다음 예는 CSS offset-path 속성을 보여줍니다.

예시

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 5%;
   width: 35px;
   height: 35px;
   offset-path: path('M70,0 A70,70 0 1,1 70,140 A70,70 0 1,1 70,0');
   animation: round 3000ms infinite ease-in-out;
   background: darkseagreen;
   border-radius: 30%;
}
@keyframes round {
   0% {
      offset-distance: 0%;
   }
   100% {
      offset-distance: 100%;
   }
}
</style>
</head>
<body>
<hr/>
<div></div>
</body>
</html>

출력

이것은 다음과 같은 결과를 생성합니다 -

CSS 오프셋 경로(동작 경로)를 사용하여 원형 경로에서 요소를 이동하는 방법은 무엇입니까?