Créer un effet de glitch / bug informatique au survol
Pour vos présentations ou pour votre logo, que ce soit en survol ou en permanence, ajoutez un effet de glitch / bug moderne ! Découvrons ensemble comment le mettre en place.
Mis à jour le 3 décembre 2024
Pour vos présentations ou pour votre logo, que ce soit en survol ou en permanence, ajoutez un effet de glitch / bug moderne ! Découvrons ensemble comment le mettre en place.
1ère étape
Commençons par le code HTML.
HTML
<i class="fab fa-instagram fa-4x"></i>Et dans la balise head :
HTML
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css” />Nous allons utiliser font-awesome pour faire en sorte d’afficher une icône sans se prendre la tête avec une image à chercher.
2ème étape
Stylisons l'icône et le survol.
CSS
.fab {
color: white;
}
.fab:hover {
animation: icon-glitch 1s infinite;
}Au survol de l’icône, nous appelons une animation “icon-glitch”. Il suffit de l’appeler pour appliquer cet effet sur tous les éléments.
3ème étape
Créons l'animation icon-glitch pour terminer le projet.
CSS
@keyframes icon-glitch {
0% {
text-shadow: 5px 4px rgb(244, 67, 54), -5px -6px rgb(33, 150, 243);
}
25% {
text-shadow: -5px -6px rgb(244, 67, 54), 5px 4px rgb(33, 150, 243);
}
50% {
text-shadow: 5px 4px rgb(244, 67, 54), -8px 4px rgb(33, 150, 243);
}
75% {
text-shadow: -8px -4px rgb(244, 67, 54), -5px -4px rgb(33, 150, 243);
}
100% {
text-shadow: -5px 0 rgb(244, 67, 54), 5px -4px rgb(33, 150, 243);
}
}Catégorie : Développement
