使用打字稿和順風的動畫頁腳和浮動圖標

此頁腳組件透過引人入勝的動畫展示社群媒體圖示。 懸停時，圖示會巧妙地向上浮動並旋轉，顯示下面對應的平台名稱。

現場示範

簡報會動態調整您的系統主題（淺色或深色）。

原始碼（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 社群

此修訂版本提高了程式碼清晰度，向圖像添加了替代文字以方便訪問，並修正了較小的格式問題。 為了保持一致性，電子郵件地址也已更新。

以上是使用打字稿和順風的動畫頁腳和浮動圖標的詳細內容。更多資訊請關注PHP中文網其他相關文章！