Effetto passaggio del mouse sull'icona

1466 ledoc

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

23 August 2025

Modello HTML per la pagina di accesso turca

13 October 2025

Elementi HTML del contenitore di animazione CSS

22 September 2025

Animazione CSS: effetto rimpianto cromatico

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 la pagina di accesso turca

Elementi HTML del contenitore di animazione CSS

Animazione CSS: effetto rimpianto cromatico

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS