CSS ray() 함수

정의와 사용법

CSS ray() 함수는 애니메이션 요소가 따라야 할 이동 경로 선분을 정의하며, 이 선분은 '광선'이라고 합니다. 광선은 이동 위치에서 시작하여 지정된 각도 방향으로 연장됩니다.

ray() 함수와 offset-path 속성을 함께 사용합니다.

예제

예제 1

다양한 각도의 광선:

#square1 {
  width: 65px;
  height: 65px;
  background: yellow;
  offset-position: bottom right;
  offset-path: ray(45deg);
}
#square2 {
  width: 65px;
  height: 65px;
  background: pink;
  offset-position: top right;
  offset-path: ray(-25deg);
}
#square3 {
  width: 65px;
  height: 65px;
  background: salmon;
  offset-position: bottom left;
  offset-path: ray(90deg);
}

직접 시험해 보세요

예제 2

사용 offset-path 과 ray() 애니메이션 효과 구현：

 #frameDiv {
  width: 200px;
  height: 200px;
  margin: 20px;
  position: relative;
  border: solid black 1px;
  background-color: rgb(205, 242, 205);
}
#frameDiv > div {
  width: 50px;
  height: 50px;
  background-color: hotpink;
  offset-path: ray(45deg);
  animation: moveDiv 3s 3;
}
@keyframes moveDiv {
  100% { offset-distance: 100%; }
}

직접 시험해 보세요

CSS 문법

ray(angle size contain at position)
값 설명
angle 필수 사항입니다. 기울기의 방향/각도를 지정합니다.
size

선택 사항입니다. 기울기의 길이를 지정합니다. 즉, 포함된 상자의 offset-distance 0%에서 100% 사이의 거리입니다.

다음 중 하나의 키워드 값을 받아들이면 됩니다：

  • closest-side - (기본) 기울기 출발점과 포함된 블록 가장 가까운 변 사이의 거리
  • closest-corner - 기울기 출발점과 포함된 블록 가장 가까운角 사이의 거리
  • farthest-side - 기울기 출발점과 포함된 블록 가장 멀린 변 사이의 거리
  • farthest-corner - 기울기 출발점과 포함된 블록 가장 멀린角 사이의 거리
  • sides - 기울기 출발점과 선분과 포함된 블록 경계점 사이의 거리
contain 선택 사항입니다. 기울기의 길이를 줄여, offset-distance: 100% 일 때도 요소가 포함된 블록 내에 남아 있는지 보장합니다.
at position

선택 사항입니다. 기울기의 출발점 및 요소가 포함된 블록 내에 배치될 위치를 지정합니다.

생략된 경우, 요소의 offset-position 값이 사용됩니다。

요소가 offset-position 값이 없으면, 요소는 포함된 블록의 중심에 배치됩니다(즉, 50% 50%입니다).

기술 세부 사항

버전： CSS 모션 경로 모듈 레벨 1

브라우저 지원

표格에 표시된 숫자는 이 함수를 최초로 완전히 지원하는 브라우저 버전을 나타냅니다。

크롬 에지 파이어폭스 사파리 오페라
116 116 122 17 102

관련 페이지

참조:offset-path 속성