Effet d'animation de survol de texte

Ouvrir dans l'éditeur Publiez votre code Precisa de um site?

Recommandé

20 May 2025

Galerie d'animaux

HTML

<!DOCTYPE html>
<html>

<head>
 <title>Text Hover Effect CSS | Animation Effects</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="style.css">
</head>

</ul>
</body>

</html>

CSS

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

Effet d'animation de survol de texte

Recommandé

Un code de Skyrreum

Carte de retournement de prix

Galerie d'animaux

HTML

CSS

JS

Recommandé

Un code de Skyrreum

Carte de retournement de prix

Galerie d'animaux

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS