Effet de survol d'icône

1924 ledoc

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

13 April 2025

Intégration de jeu Flash avec Ruffle Player

HTML

CSS

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
:root {
   --bg: #222;
   --clr: #fff;
}

body {
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
   background: var(--bg);
}
ul {
   position: relative;
   display: flex;
   gap: 50px;
}
ul li {
   position: relative;
   list-style: none;
   width: 80px;
   height: 80px;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
   transition: 0.5s;
}
ul li::before {
   content: &singleQuote;&singleQuote;;
   position: absolute;
   inset: 30px;
   box-shadow: 0 0 0 10px var(--clr),
               0 0 0 20px var(--bg),
               0 0 0 22px var(--clr);
   transition: 0.5s;
}
ul li:hover::before {
   inset: 15px;
}
ul li::after {
   content: &singleQuote;&singleQuote;;
   position: absolute;
   inset: 0;
   background: var(--bg);
   transform: rotate(45deg);
   transition: 0.5s;
}
ul li:hover::after {
   inset: 0px;
   transform: rotate(0deg);
}
ul li a {
   position: relative;
   text-decoration: none;
   z-index: 10;
   display: flex;
   justify-content: center;
   align-items: center;
}
ul li a i {
   font-size: 2em;
   transition: 0.5s;
   color: var(--clr);
   opacity: 1;
}
ul li:hover a i {
   color: var(--clr);
   transform: translateY(-40%);
}
ul li a span {
   position: absolute;
   font-family: sans-serif;
   color: var(--clr);
   opacity: 0;
   transition: 0.5s;
   transform: scale(0) translateY(200%);
}
ul li:hover a span {
   opacity: 1;
   transform: scale(1) translateY(100%);
}
ul li:hover a i,
ul li a span {
   filter: drop-shadow(0 0 20px var(--clr)) drop-shadow(0 0 40px var(--clr)) drop-shadow(0 0 60px var(--clr));
}

Effet de survol d'icône

Recommandé

Un code par gherhz

Un code par creativearray554

Intégration de jeu Flash avec Ruffle Player

HTML

CSS

JS

Recommandé

Un code par gherhz

Un code par creativearray554

Intégration de jeu Flash avec Ruffle Player

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS