Effetto passaggio del mouse sull'icona

1273 ledoc

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

15 July 2025

Modello HTML per generatore di citazioni in francese

8 July 2025

Scelta del personaggio con animazione della scheda di anteprima (sprite CSS)

20 April 2025

il gioco della palla per divertimento (di Mr)

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));
}

Consigliato

Modello HTML per generatore di citazioni in francese

Scelta del personaggio con animazione della scheda di anteprima (sprite CSS)

il gioco della palla per divertimento (di Mr)

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS