Pied de page animé avec icône flottante utilisant un script dactylographié et un vent arrière

Ce composant de pied de page présente les icônes des réseaux sociaux avec une animation attrayante. En survol, les icônes flottent subtilement vers le haut et tournent, révélant le nom de la plate-forme correspondante ci-dessous.

Démo en direct

La démo s'adapte dynamiquement au thème de votre système (clair ou sombre).

Code source (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>
  );
}

Attribution :

• Icônes 3D : Communauté Figma

Cette version révisée améliore la clarté du code, ajoute du texte alternatif aux images pour plus d'accessibilité et corrige des problèmes de formatage mineurs. L'adresse e-mail est également mise à jour par souci de cohérence.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!