vendredi 27 juillet 2007, 12:20
Comment réaliser un lien animé ?
Par Sven CAILTEUX - CSS - Lien permanent
Voici une astuce pour réaliser un lien animé.
Au passage de la souris sur le lien, le lien s'anime en fonction de l'image créée.
Tout d'abord voici l'image, un gif animé :

Et voici le code CSS qui permettra d'avoir le lien survolé qui s'anime :
a:link {
color: green;
white-space: nowrap;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: green;
}
a:hover {
text-decoration: none;
background-image: url(animated_line.gif);
background-repeat: repeat-x;
background-position: 100% 100%;
padding-bottom: 0;
color: navy;
}
a:active {
text-decoration: none;
}
Et enfin un exemple concret.
3 commentaires
Oui mais... si vous décidez de ne pas répéter l'animation du gif (ex : un trait qui se trace une fois de gauche à droite)
- sous Firefox : le trait se retrace à chaque "hover" > OK
- sous IE : le trait se trace 1 fois correctement, puis il reste comme "bloqué" sur sa position finale
- idem sour Opera
Mystère !
J'ai fait le test, ça a l'air de bien fonctionner. Ce ne serait pas un problème de version de navigateur.
Merci pour l'astuce,
cella donne un effet sympa.
Pour info l'image du visuel ne fonctionne plus