시에스에스(CSS) 다각형 애니메이션

시에스에스로만 애니메이션을 만들 수 있다. 크게 써 먹을 곳을 찾지는 못했지만 신기해서 옮겨 놓는다. 점점 자바스크립트가 시에스에스 안으로 들어 오는 느낌이다.

div {
       width: 300px;
       height: 300px;
       background: repeating-linear-gradient(red, orange 50px);
       clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
       animation: 4s poly infinite alternate ease-in-out;
       margin: 10px auto; }

@keyframes poly
     { from
          { clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%); }
      to
          { clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%, 0% 100%, 30% 50%, 0% 0%);
      }
}

결과는 아래와 같다.

 

이 스타일을 이해하기 위해서 몇 가지 따로 살펴볼 것이 있다.

repeating-linear-gradient(red, orange 50px);

빨강에서 오렌지 색으로 차츰차츰 변화하는 그래디언트를 높이 50px 만큼 번갈아가며 선형으로 되풀이하여 보여준다.

종류는 원형(radial-gradient), 원뿔(conic-gradient)가 있다.

clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);

다각형을 그리는 경로를 꼭짓점의 좌표로 정하고 있다. 반점(,)으로 구분된 8개의 좌표가 있어서 표창과 같은 모양을 만든다.

기본 도형에는 사각형(inset), 원(circle), 타원(ellipse), 다각형(polygon)이 있다.

developer.mozilla.org/en-US/docs/Web/CSS/basic-shape

 

animation: 4s poly infinite alternate ease-in-out;

애니메이션 속력은 4s이고 다각형을 보였다가 감추기를 무한 반복한다.

@keyframes poly {
                        from  {  A   }
                        to {   B   }
}

열쇠프레임은 폴리(poly)를 A부터 B까지 실행한다. 위에 주어진 좌표를 표시해 두었다.

developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

@keyframes

 

확장할 수 있는 벡터 그래픽(SVG: Scalable Vector Graphics)

developer.mozilla.org/en-US/docs/Web/SVG

SVG: Scalable Vector Graphics