Typescript와 tailwind를 사용하여 플로트 아이콘이 있는 애니메이션 바닥글

이 바닥글 구성요소는 매력적인 애니메이션으로 소셜 미디어 아이콘을 보여줍니다. 마우스를 올리면 아이콘이 미묘하게 위쪽으로 떠다니며 회전하며 아래에 해당 플랫폼 이름이 표시됩니다.

라이브 데모

데모는 시스템 테마(밝음 또는 어두움)에 따라 동적으로 조정됩니다.

소스코드(footer-animation.tsx)

<code class="language-typescript">import { Send } from "lucide-react";

export function Footer() {
  return (
    <div className="w-full flex justify-between items-center">
      {/* Email Section */}
      <div className="flex items-center gap-2">
        <Send className="h-7 w-7" />
        <a className="text-2xl hover:underline" href="mailto:hello@brokariim.space">hello@brokariim.space</a>
      </div>

      {/* Social Icons */}
      <div className="flex items-center relative">
        <a className="relative group grid place-items-center" href="#">
          <div className="rotate-6 group-hover:-rotate-12 group-hover:-translate-y-6 transition duration-500 hover:duration-200 rounded-xl grid place-items-center">
            <img alt="Whatsapp Icon" className="w-16 h-16" src="/wa3d.png" />
          </div>
          Whatsapp
        </a>
        <a className="relative group grid place-items-center" href="#">
          <div className="-rotate-6 group-hover:-rotate-12 group-hover:-translate-y-6 transition duration-500 hover:duration-200 rounded-xl grid place-items-center">
            <img alt="Instagram Icon" className="w-16 h-16" src="/ig3d.png" />
          </div>
          Instagram
        </a>
        <a className="relative group grid place-items-center" href="#">
          <div className="rotate-6 group-hover:-rotate-12 group-hover:-translate-y-6 transition duration-500 hover:duration-200 rounded-xl grid place-items-center">
            <img alt="Discord Icon" className="w-16 h-16" src="/dc3d.png" />
          </div>
          Discord
        </a>
        <a className="relative group grid place-items-center" href="#">
          <div className="-rotate-6 group-hover:-rotate-12 group-hover:-translate-y-6 transition duration-500 hover:duration-200 rounded-xl grid place-items-center">
            <img alt="LinkedIn Icon" className="w-16 h-16" src="/ln3d.png" />
          </div>
          LinkedIn
        </a>
        <a className="relative group grid place-items-center" href="#">
          <div className="rotate-6 group-hover:-rotate-12 group-hover:-translate-y-6 transition duration-500 hover:duration-200 rounded-xl grid place-items-center">
            <img alt="TikTok Icon" className="w-16 h-16" src="/tiktok3d.png" />
          </div>
          TikTok
        </a>
      </div>
    </div>
  );
}</code>

속성:

• 3D 아이콘: Figma 커뮤니티

이 개정 버전은 코드 명확성을 향상하고, 접근성을 위해 이미지에 대체 텍스트를 추가하고, 사소한 형식 문제를 수정했습니다. 일관성을 위해 이메일 주소도 업데이트됩니다.

위 내용은 Typescript와 tailwind를 사용하여 플로트 아이콘이 있는 애니메이션 바닥글의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!