Tailwind CSS를 사용하여 별똥별 테두리 애니메이션 만들기

이 블로그 게시물에서는 Tailwind CSS를 사용하여 매혹적인 "유성" 테두리 애니메이션을 만들어 보겠습니다. 이 효과는 사용자의 주의를 끌 수 있는 입력 필드에 빛나는 애니메이션 테두리를 제공합니다. 이메일 가입이나 중요한 알림과 같은 클릭 유도 문구 섹션에 적합합니다.

데모

코드를 살펴보기 전에 여기에서 효과의 라이브 데모를 확인할 수 있습니다. Tailwind Playground에서 보기

개념

애니메이션은 Tailwind CSS의 유틸리티 클래스와 의사 요소를 사용하여 구현됩니다. Tailwind의 의사 클래스 이후를 사용하여 입력 필드 주위를 회전하는 원추형 그라데이션 애니메이션을 만들어 테두리를 따라가는 유성 같은 느낌을 줍니다.

HTML 및 Tailwind CSS 설정

다음은 이 효과를 만드는 데 필요한 HTML 구조와 Tailwind CSS 클래스입니다.

<div class="flex h-screen bg-black">
  <div class="z-10 m-auto overflow-hidden p-0.5">
    <div class="after:transparent relative h-14 w-[500px] rounded-md border border-white/50 bg-black after:absolute after:-inset-[1px] after:-z-10 after:h-full after:w-full after:animate-[spin_4s_infinite] after:bg-[conic-gradient(var(--tw-gradient-stops))] after:from-transparent after:from-40% after:via-50% after:to-blue-600 after:to-100%">
      <input type="text" placeholder="Join the waitlist, enter your email.." class="h-full w-full bg-transparent px-4 text-lg text-white placeholder:text-white/40 focus:outline-none">
    </div>
  </div>
</div>

코드 분석

컨테이너 설정

  <div class="flex h-screen bg-black">




<ul>
<li>h-screen(전체 높이) 및 bg-black(검은색 배경)을 사용하여 콘텐츠를 수직 및 수평 중앙에 배치하는 플렉스 컨테이너를 만드는 것부터 시작합니다.</li>
</ul>

<h4>
  
  
  입력 필드 래퍼
</h4>



<pre class="brush:php;toolbar:false">  <div class="z-10 m-auto overflow-hidden p-0.5">




<ul>
<li>입력 필드는 애니메이션 테두리 위에 있도록 z-10이 있고, 플렉스 컨테이너 내에서 중앙에 위치하도록 m-auto가 있으며, 경계 내에 애니메이션 테두리를 포함하기 위해 오버플로가 숨겨지는 div 내부에 래핑되어 있습니다.</li>
</ul>

<h4>
  
  
  애니메이션 테두리가 있는 입력 필드
</h4>



<pre class="brush:php;toolbar:false">  <div class="after:transparent relative h-14 w-[500px] rounded-md border border-white/50 bg-black ...">




<ul>
<li>메인 입력 필드는 너비 500px, 높이 14Tailwind 단위로 고정 설정되어 있습니다.</li>
<li>border-white/50 클래스는 반투명 테두리를 추가하고 rounded-md는 둥근 모서리를 제공합니다.</li>
<li>
bg-black은 배경색을 검정색으로 설정하여 컨테이너와 혼합합니다.</li>
</ul>

<h4>
  
  
  애니메이션 만들기
</h4>



<pre class="brush:php;toolbar:false">  after:absolute after:-inset-[1px] after:-z-10 after:h-full after:w-full after:animate-[spin_4s_infinite] after:bg-[conic-gradient(var(--tw-gradient-stops))] after:from-transparent after:from-40% after:via-50% after:to-blue-600 after:to-100%">

• 다음 의사 요소는 테두리 주위에 애니메이션을 적용할 원추형 그라데이션을 만드는 데 사용됩니다.
• after:-inset-[1px] 입력 경계 너머로 그라데이션을 약간 확장하고 after:absolute는 전체 입력 영역을 덮도록 절대적으로 위치를 지정합니다.
• after:animate-[spin_4s_infinite]는 4초마다 한 번의 전체 회전을 완료하는 사용자 정의 스핀 애니메이션을 추가합니다.
• after:bg-[conic-gradient...]는 그라데이션 효과를 만듭니다. from-transparent 및 to-blue-600 클래스를 사용하여 색상 정지점을 정의하고 별똥별을 모방한 페이딩 효과를 제공합니다.

입력 필드 스타일 지정

  <input type="text" placeholder="Join the waitlist, enter your email.." class="h-full w-full bg-transparent px-4 text-lg text-white placeholder:text-white/40 focus:outline-none">

• 입력 자체는 투명하며(bg-투명) 상위 요소의 전체 높이와 너비를 차지합니다.
• text-lg 클래스는 텍스트 크기를 조정하고, text-white 및 placeholder:text-white/40은 텍스트와 자리 표시자가 어두운 배경에서도 보이도록 합니다.
• 마지막으로 focus:outline-none은 기본 포커스 윤곽선을 제거하여 사용자 정의 스타일을 유지합니다.

결론

Tailwind CSS 몇 줄과 의사 요소의 힘으로 유성 테두리 애니메이션과 같은 눈길을 끄는 효과를 만들 수 있습니다. 이 효과는 심미적으로 즐거울 뿐만 아니라 프로젝트에 맞게 구현하고 사용자 정의하기도 쉽습니다. 디자인 요구 사항에 맞게 색상, 타이밍 및 기타 속성을 자유롭게 조정하세요!

즐거운 코딩하세요!

표지 사진: Juskteez Vu, Unsplash