Анимация слов - пример html js css

• HTML код


• CSS код
• Результат кода

<div class="wow">

  <span>W</span>

  <span>O</span>

  <span>W</span>

</div>

@import url("https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap");

body {

  width: 100vw;

  height: 100vh;

  background-color: black;

  font-family: "Luckiest Guy", cursive;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}



.wow {

  position: relative;

  display: flex;

  font-size: 13rem;

}



span {

  color: black;

  text-align: center;

  width: 200px;

  height: 150px;

  border-radius: 25px;

  box-shadow: inset 0 0 0.5rem black;

  margin: 10px;

  padding: 2rem 2rem;

}



span:nth-child(1) {

  text-shadow: 0 2rem 8rem white, 0 0.5rem 1rem black;

  animation: color1 5s infinite;

}



span:nth-child(2) {

  text-shadow: 0 2rem 8rem white, 0 0.5rem 1rem black;

  animation: color2 5s infinite;

}



span:nth-child(3) {

  text-shadow: 0 2rem 8rem white, 0 0.5rem 1rem black;

  animation: color3 5s infinite;

}



@keyframes color1 {

  from {

    background: linear-gradient(-60deg, purple 20%, hotpink 30%, rebeccapurple 70%);

  }

  to {

    background: linear-gradient(-100deg, teal 20%, blue 30%, lightblue 70%);

  }

}

@keyframes color2 {

  from {

    background: linear-gradient(195deg, orange 20%, yellow 30%, blanchedalmond 70%);

  }

  to {

    background: linear-gradient(-60deg, purple 20%, hotpink 30%, rebeccapurple 70%);

  }

}

@keyframes color3 {

  from {

    background: linear-gradient(210deg, crimson 20%, red 30%, pink 70%);

  }

  to {

    background: linear-gradient(210deg, green 20%, lightgreen 30%, lime 70%);

  }

}