WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Effetto animazione passaggio del mouse sul testo
1376
ledoc
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
25 November 2025
Rocket League
1 June 2025
ECCO LISA
27 November 2024
generatore di citazioni
HTML
Copy
Text Hover Effect CSS | Animation Effects
H
o
m
e
P
a
g
e
A
b
o
u
t
U
s
P
r
o
d
u
c
t
s
C
o
n
t
a
c
t
U
s
CSS
Copy
@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700"); *, *::before, *::after { box-sizing: border-box; } body { min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 3rem; font-family: "Lato"; font-size: 1.5rem; background: #24c6dc; background: -webkit-linear-gradient(to right, #514a9d, #24c6dc); background: linear-gradient(to right, #514a9d, #24c6dc); } .menu { margin: 0; padding: 0; } .menu li { position: relative; margin: 0; padding: 0 0 1rem 2rem; list-style: none; perspective: 500px; } .menu li::before, .menu li::after { content: ""; position: absolute; } .menu li::before { top: 50%; left: 0; transform: translateY(-80%); width: 0.6rem; height: 0.6rem; background: rgba(255, 255, 255, 0.5); border-radius: 50%; transition: background 500ms; } .menu li:hover::before { background: #fff; } .word { text-decoration: none; color: rgba(255, 255, 255, 0.6); } .word:hover span { transform: rotateX(-360deg); color: #fff; } .word span { display: inline-block; padding: 0 0.1rem; font-weight: 300; font-size: 2.5em; transition: transform 1s linear, color 2s linear; } .word1 span:nth-child(1) { transition-delay: 0.1s; } .word1 span:nth-child(2) { transition-delay: 0.2s; } .word1 span:nth-child(3) { transition-delay: 0.3s; } .word1 span:nth-child(3) { transition-delay: 0.3s; } .word1 span:nth-child(4) { transition-delay: 0.4s; } .word1 span:nth-child(5) { transition-delay: 0.5s; } .word1 span:nth-child(6) { transition-delay: 0.6s; } .word1 span:nth-child(7) { transition-delay: 0.7s; } .word1 span:nth-child(8) { transition-delay: 0.8s; } .word1 span:nth-child(9) { transition-delay: 0.9s; } .word2 span:nth-child(1) { transition-delay: 0.1s; } .word2 span:nth-child(2) { transition-delay: 0.2s; } .word2 span:nth-child(3) { transition-delay: 0.3s; } .word2 span:nth-child(3) { transition-delay: 0.3s; } .word2 span:nth-child(4) { transition-delay: 0.4s; } .word2 span:nth-child(5) { transition-delay: 0.5s; } .word2 span:nth-child(6) { transition-delay: 0.6s; } .word2 span:nth-child(7) { transition-delay: 0.7s; } .word2 span:nth-child(8) { transition-delay: 0.8s; } .word3 span:nth-child(1) { transition-delay: 0.1s; } .word3 span:nth-child(2) { transition-delay: 0.2s; } .word3 span:nth-child(3) { transition-delay: 0.3s; } .word3 span:nth-child(3) { transition-delay: 0.3s; } .word3 span:nth-child(4) { transition-delay: 0.4s; } .word3 span:nth-child(5) { transition-delay: 0.5s; } .word3 span:nth-child(6) { transition-delay: 0.6s; } .word3 span:nth-child(7) { transition-delay: 0.7s; } .word3 span:nth-child(8) { transition-delay: 0.8s; } .word4 span:nth-child(1) { transition-delay: 0.1s; } .word4 span:nth-child(2) { transition-delay: 0.2s; } .word4 span:nth-child(3) { transition-delay: 0.3s; } .word4 span:nth-child(3) { transition-delay: 0.3s; } .word4 span:nth-child(4) { transition-delay: 0.4s; } .word4 span:nth-child(5) { transition-delay: 0.5s; } .word4 span:nth-child(6) { transition-delay: 0.6s; } .word4 span:nth-child(7) { transition-delay: 0.7s; } .word4 span:nth-child(8) { transition-delay: 0.8s; } .word4 span:nth-child(9) { transition-delay: 0.9s; } .word4 span:nth-child(10) { transition-delay: 1s; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */