This tutorial is from open-source community. Access the source code
💡 Ce tutoriel est traduit par l'IA à partir de la version anglaise. Pour voir la version originale, vous pouvez cliquer ici
Dans ce laboratoire, nous allons apprendre à créer un effet de survol de lien en forme de zigzag avec CSS. Cet effet crée une animation en zigzag lorsqu'on survole un lien, ajoutant un élément amusant et dynamique à votre site web. En utilisant un fond de dégradé linéaire et un SVG avec un tracé en zigzag, nous pouvons obtenir cet effet avec seulement quelques lignes de code.
index.html et style.css ont déjà été fournis dans la machine virtuelle.
Pour créer un effet en forme de zigzag lors du survol d'un lien, vous pouvez suivre ces étapes :
linear-gradient.a.squiggle {
background: linear-gradient(to bottom, #0087ca 0%, #0087ca 100%);
background-position: 0 100%;
background-repeat: repeat-x;
background-size: 2px 2px;
color: inherit;
text-decoration: none;
}:hover pour le lien avec une background-image d'une URL de données contenant un SVG avec un tracé en forme de zigzag et une animation.a.squiggle:hover {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift.3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-15px);}}%3C/style%3E%3Cpath fill='none' stroke='%230087ca' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
background-size: auto 4px;
}<p>
Le <a class="squiggle" href="#">magnifique poulpe</a> a nagé gracieusement.
</p>Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.
Félicitations ! Vous avez terminé le laboratoire sur l'effet de survol de lien en forme de zigzag. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.
