Pengaki Animasi dengan Ikon Terapung menggunakan skrip taip dan angin ekor

Komponen pengaki ini mempamerkan ikon media sosial dengan animasi yang menarik. Pada tuding, ikon terapung secara halus ke atas dan berputar, mendedahkan nama platform yang sepadan di bawah.

Demo Langsung

Demo melaraskan secara dinamik kepada tema sistem anda (terang atau gelap).

Kod Sumber (footer-animation.tsx)

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>
  );
}

Atribusi:

• Ikon 3D: Komuniti Figma

Versi yang disemak ini meningkatkan kejelasan kod, menambahkan teks alt pada imej untuk kebolehaksesan dan membetulkan isu pemformatan kecil. Alamat e-mel juga dikemas kini untuk konsistensi.

Atas ialah kandungan terperinci Pengaki Animasi dengan Ikon Terapung menggunakan skrip taip dan angin ekor. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!