Effetto animazione passaggio del mouse sul testo

1616 ledoc

Apri nell'Editor Video Pubblica il Tuo Codice

Effetto animazione passaggio del mouse sul testo

Consigliato

10 February 2025

Modello HTML per sito web portfolio olografico

17 May 2025

sociale moderno

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

Effetto animazione passaggio del mouse sul testo

Consigliato

Un codice di bachir123

Modello HTML per sito web portfolio olografico

sociale moderno

HTML

CSS

JS

Consigliato

Un codice di bachir123

Modello HTML per sito web portfolio olografico

sociale moderno

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS