CSS에서 그라데이션 테두리 애니메이션

얼마전에 이거 멋있게 만들었어요animated Multi-colour text effect in CSS .
저는 이 기사를 다시 살펴보았고 이러한 학습 중 일부를 사용하여 매우 멋진 애니메이션 테두리 효과를 만들 수 있다고 생각했습니다!

오늘의 최종 결과는 이 멋진 애니메이션 테두리 그래디언트입니다.

그라디언트 테두리의 기초 설정

CSS의 그라데이션 테두리는 border-image 속성을 활용해야 하므로 까다롭습니다. 매우 잘 알려진 재산이 아니며 몇 가지 주의 사항이 있습니다.

그러나 한번 해보자.

먼저 HTML 설정에서 단일 div를 만듭니다.

<div></div>

좋은 데모를 볼 수 있도록 이 div에 큰 너비와 높이를 지정해 보겠습니다.

div {
  width: 50vmin;
  height: 50vmin;
  border: 1rem solid;
}

이렇게 하면 뷰포트 너비의 절반인 div가 생성됩니다. 그리고 이 div에 1rem 테두리를 지정합니다.

다음으로 추가하고 싶은 것은 실제 테두리 이미지입니다. 실제 이미지를 전달하거나 SVG 또는 그래디언트를 설정하여 이미지로 렌더링할 수 있습니다.

div {
  width: 50vmin;
  height: 50vmin;
  border: 1rem solid;
  border-image: linear-gradient(0deg, #12c2e9, #c471ed, #f64f59) 1;
}

이제 기본 테두리 설정이 완료되었으며 다음과 같이 표시됩니다.



꽤 가깝습니다. 이제 애니메이션만 하면 됩니다!
일부CSS variables를 사용하여 위치를 애니메이션 가능하게 만들어 보겠습니다.

div {
  --angle: 0deg;
  width: 50vmin;
  height: 50vmin;
  border: 1rem solid;
  border-image: linear-gradient(var(--angle), #12c2e9, #c471ed, #f64f59) 1;
}

이렇게 하면 새--angle 변수가 도입됩니다. 이것은 CSS가 알고 있는 것이 아니라 우리 자신의 변수입니다.

그런 다음 기본 애니메이션 쿼리도 추가할 수 있습니다.

animation: 5s rotate linear infinite;

회전 애니메이션은 다음과 같습니다.

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

그러나 아무 일도 일어나지 않을 것입니다!
값은 변경되지만 알려진 CSS 변수가 아니므로 변경 가능한 속성으로 정의해야 합니다.

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

이제 CSS에서 애니메이션 테두리가 작동합니다!

브라우저 지원

브라우저 지원을 위해 기술적으로 여러 속성을 살펴봐야 합니다. 그래도 아래는 지원이 얼마나 좋은지에 대한 훌륭한 예를 제공해야 합니다.

읽어주셔서 감사합니다. 연결해 보겠습니다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나