Tailwind CSS로 애니메이션 테두리 그라데이션을 만드는 방법

"GetCandy"의 이름을 "Lunar"로 변경하기 위해 애니메이션 그래디언트 테두리 호버 효과가 있는 버튼/링크가 있는 기능landing page을 만들었습니다… 🫠

그리고 놀랍게도 쉬웠습니다. 내가 한 방법은 다음과 같습니다.

국경 속이기

먼저 대화형 요소가 필요합니다. 이 예에서는 <a>를 사용하여 배경색과 패딩을 사용하여 속이는 "테두리"를 만들 것입니다.

<a href="#" class="inline-block bg-white p-0.5">
  <span class="block px-5 py-3 text-white bg-slate-900"> Get Started </span>
</a>

그 안에 요소의 텍스트 콘텐츠를 포함하는 <span>를 추가하고 버튼/링크에 원하는 패딩을 적용합니다.

그라디언트 추가

다음으로 그라디언트를 추가해야 합니다.

Hypercolor 에서 미리 만들어진 Tailwind CSS 그래디언트를 사용하겠습니다.

가짜 테두리가 있는 대화형 요소에 그래디언트를 적용합니다.

<a
  href="#"
  class="inline-block bg-white from-pink-500 via-red-500 to-yellow-500 p-0.5"
>
  <span class="block px-5 py-3 text-white bg-slate-900"> Get Started </span>
</a>

추가된 그래디언트 클래스가 bg-white를 재정의할지 걱정할 수도 있지만 그러지 않으려면 호버에서 수행되는 그래디언트 방향 클래스를 추가해야 합니다.

호버 효과 적용

우리는 우리가 수행한 작업을 수행하고 클래스를 두 개 더 추가할 수 있습니다. 하나는 호버에 적용되는 기본 Tailwind CSS 클래스이고 다른 하나는 항상 적용되며 약간의 JIT 마법이 필요합니다.

<a
  href="#"
  class="inline-block bg-white from-pink-500 via-red-500 to-yellow-500 p-0.5 bg-[length:400%_400%] hover:bg-gradient-to-r"
>
  <span class="block px-5 py-3 text-white bg-slate-900"> Get Started </span>
</a>

이것들을 분해합시다.
hover:bg-gradient-to-r
이렇게 하면 bg-white 대신 그라데이션 표시를 만드는 호버에만 그라데이션 방향 클래스가 적용됩니다.
bg-[length:400%_400%]
이렇게 하면 그래디언트가 커져 애니메이션을 적용할 수 있습니다. 이 클래스가 없으면 그래디언트는 있는 그대로 나타나고 애니메이션되지 않습니다.

그라디언트 애니메이션

이제 애니메이션을 적용할 차례입니다.

먼저 Tailwind CSS 구성에 몇 가지를 추가해야 합니다.

theme: {
  extend: {
    animation: {
      border: 'border 4s ease infinite',
    },
    keyframes: {
      border: {
        '0%, 100%': { backgroundPosition: '0% 50%' },
        '50%': { backgroundPosition: '100% 50%' },
      },
    },
  },
}

여기서 우리는 animate-border 개체에서 border 개체를 사용하는 클래스 keyframes로 애니메이션을 만들고 있습니다. 요컨대 이것은 그라디언트를 이동합니다.

마지막으로 그래디언트 클래스가 있는 대화형 요소에 animate-border 클래스를 추가할 수 있습니다.

전체 예제는 다음과 같습니다.

<a
  href="#"
  class="animate-border inline-block bg-white from-pink-500 via-red-500 to-yellow-500 p-0.5 bg-[length:400%_400%] hover:bg-gradient-to-r"
>
  <span class="block px-5 py-3 text-white bg-slate-900"> Get Started </span>
</a>

그리고 여기 Tailwind Play의 full example(약간의 추가 양념 포함)이 있습니다.