Efecto de animación al pasar el cursor sobre el texto

1,881 ledoc

Abrir en el editor Publica tu código

Efecto de animación al pasar el cursor sobre el texto

Recomendado

28 August 2025

Plantilla HTML para aplicación de transmisión de música con Tailwind

12 March 2026

Deletrea con Flickr: Generador de texto basado en imágenes

9 March 2026

Juegos desbloqueados: juega juegos en línea gratis en la escuela

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