Comment créer des liens éclatants dans CSS3

Cet article montre la création de liens élogieux animés à l'aide de CSS3. Alors qu'un article précédent a utilisé du texte de texte et du texte transparent pour un effet flou, celui-ci exploite le texte du texte pour un effet élogieux sur le plan de volant ou la mise au point. Les utilisateurs IE9 auront besoin d'un navigateur plus récent car il manque de support de Text-Shadow.

L'effet est obtenu avec une combinaison de transitions de Text-Shadow et CSS3. Examinons le code.

Tout d'abord, le HTML: un lien simple avec la classe "Glow" est utilisé:

<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="glow">Glowing Link</a>

Le CSS commence par définir l'état initial et les propriétés de transition. La transition est définie sur 500 ms avec un synchronisation linéaire pour un effet lisse. Les préfixes des fournisseurs sont inclus pour une large compatibilité du navigateur:

a.glow, a.glow:hover, a.glow:focus {
    text-decoration: none;
    color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15baaf;
    text-shadow: none;
    -webkit-transition: 500ms linear 0s;
    -moz-transition: 500ms linear 0s;
    -o-transition: 500ms linear 0s;
    transition: 500ms linear 0s;
    outline: 0 none;
}

Ensuite, l'effet brillant est défini pour les états de survol et de mise au point. Deux shadows de texte, un blanc et un jaune, sont utilisés pour un effet plus prononcé:

a.glow:hover, a.glow:focus {
    color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff;
    text-shadow: -1px 1px 8px https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffc, 1px -1px 8px https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff;
}

Une page de démonstration (lien omis pour la sécurité) montre l'effet. Expérimentez avec différentes text-shadow et les propriétés de transition pour personnaliser l'animation.

Remarques de compatibilité du navigateur:

L'effet fonctionne bien dans les navigateurs modernes (Firefox, Chrome, Safari). IE9 manque de prise en charge de Text-Shadow. L'opéra prend en charge les transitions mais peut ne pas les appliquer de manière cohérente aux shadows de texte, ce qui entraîne une animation moins fluide.

Un deuxième ensemble de liens dans la démo utilise un effet arrière (modifiant la couleur du texte pour correspondre à l'arrière-plan), mais cela rend le texte invisible dans les versions IE plus anciennes. Modernizr ou un script de détection de Text-Shadow (exemple ci-dessous) peut résoudre ce problème:

if (document.createElement("detect").style.textShadow === "") {
    document.getElementsByTagName("html")[0].className += " textshadow";
}

Cette technique offre un moyen simple mais efficace d'ajouter un intérêt visuel aux liens. N'hésitez pas à partager vos créations!

Les questions fréquemment posées (FAQ) sont omises en raison de restrictions de longueur, mais le texte d'origine fournit des réponses complètes.

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!