이 블로그 게시물에서는 Tailwind CSS를 사용하여 매혹적인 "유성" 테두리 애니메이션을 만들어 보겠습니다. 이 효과는 사용자의 주의를 끌 수 있는 입력 필드에 빛나는 애니메이션 테두리를 제공합니다. 이메일 가입이나 중요한 알림과 같은 클릭 유도 문구 섹션에 적합합니다.
코드를 살펴보기 전에 여기에서 효과의 라이브 데모를 확인할 수 있습니다. Tailwind Playground에서 보기
애니메이션은 Tailwind CSS의 유틸리티 클래스와 의사 요소를 사용하여 구현됩니다. Tailwind의 의사 클래스 이후를 사용하여 입력 필드 주위를 회전하는 원추형 그라데이션 애니메이션을 만들어 테두리를 따라가는 유성 같은 느낌을 줍니다.
다음은 이 효과를 만드는 데 필요한 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">
<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" />
Tailwind CSS 몇 줄과 의사 요소의 힘으로 유성 테두리 애니메이션과 같은 눈길을 끄는 효과를 만들 수 있습니다. 이 효과는 심미적으로 즐거울 뿐만 아니라 프로젝트에 맞게 구현하고 사용자 정의하기도 쉽습니다. 디자인 요구 사항에 맞게 색상, 타이밍 및 기타 속성을 자유롭게 조정하세요!
즐거운 코딩하세요!
표지 사진: Juskteez Vu, Unsplash
위 내용은 Tailwind CSS를 사용하여 별똥별 테두리 애니메이션 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!