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

1,974 ledoc

Abrir en el editor Publica tu código

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

Recomendado

10 January 2026

Temporizador de cuenta regresiva y zona de fanáticos del Super Bowl LIX

23 March 2023

Página de preguntas frecuentes responsiva

21 May 2024

Tela de Login

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