Text Hover Animation Effect

Open In Editor Publish Your Code

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

Text Hover Animation Effect

Recommended

Alternatif bir Giriş sayfası

CSS Login Form

Metehan'nın bir kodu

HTML

CSS

JS

Recommended

Alternatif bir Giriş sayfası

CSS Login Form

Metehan'nın bir kodu

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS