CSS: offset-path, ray() 함수 예시

모든 예시에서 offset-distance 속성을 0%에서 100%로 애니메이션화하여 요소가 경로를 따라 움직이도록 합니다. 투명도는 20%에서 100%로 변화합니다.

예시 0: 기본 동작

1) offset-path 속성을 명시하지 않으면 기본값은 none이며, offset-distance는 position의 left, top, right, bottom과 같은 속성을 사용합니다. coord-box를 사용하여 박스의 어떤 부분을 기준으로 경로를 그릴지 선택할 수 있습니다.

2) basic-shape 기본 모양 함수를 사용하여 경로를 그릴 수 있습니다.

0-a. offset-path: padding-box;
0-b. offset-path: content-box;
0-c. offset-path: polygon(5% 10%, 95% 10%, 95% 90%, 5% 90%);
0-a
0-b
0-c

예시 1: url(#svg-path)

사각형과 별 모양의 svg의 경로를 따라 이동하는 예시입니다.

offset-path: url(#path-a);
1-a
1-b

예시 2: ray() 함수

ray의 기본 위치는 50%, 50%입니다. angle은 시작 위치부터 시작되는 path가 어떤 각도로 이동할지 결정합니다. 0도는 y축이 올라가는 기준이며, 시계 방향으로 각도가 증가합니다.(conic-gradient와 동일) 또한 요소가 해당 축을 top으로 맞닿도록 회전이 되어있는 모습을 볼 수 있습니다.

offset-path: ray(0deg);
2

예시 3: 대각선 이동

offset-rotate을 0deg로 설정해 요소가 회전하지 않도록 했습니다. at 0px 0px은 시작 위치를 결정합니다. farthest-corner는 시작 위치에서 가장 멀리 있는 코너를 타겟으로 합니다.

offset-rotate: 0deg;
offset-path: ray(105deg farthest-corner at 0px 0px);
3