WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Effet d'animation de survol de texte
1119
ledoc
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
21 September 2024
Chronomètre
16 October 2025
Exemple d'élément de chargement animé CSS
13 June 2025
Un code de Metehan
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) */