Code Ready | Frontend

✅ Как создать поочередную анимацию свечения?



Эффект анимации светящегося текста — это потрясающий текстовый эффект CSS, если говорить более подробно, «Эффекты анимации светящегося текста», как и его название, предлагают вам поразительный эффект, благодаря которому ваш текст будет непрерывно светиться. ⬇️



☑️ Каждая буква вашего текста загорается одна за другой и светится на темном фоне. Это оставит у посетителей более глубокое впечатление о вашем веб-сайте, и они смогут вернуться на него снова. Давайте получим эффекты анимации светящегося текста и насладимся тем, что он предлагает!



HTML ⤵️

<div class="text-container">

   <span>g</span>

   <span>l</span>

   <span>o</span>

   <span>w</span>

</div>



CSS ⤵️

@import url('https://fonts.googleapis.com/css2?family=Baloo+Thambi:wght@400&display=swap');



body {

  background-color: #000;

  color: #111;

  text-align: center;

  font-family: 'Baloo Thambi', cursive;

  font-size: 100px;

}

.text-container > span {

  text-transform: uppercase;

  animation: glow 2s ease-in-out infinite;

}

@keyframes glow {

  0%, 100% {

    color: #FFF;

    text-shadow: 0 0 10px #0652DD, 0 0 50px #0652DD, 0 0 100px #0652DD;

  }

  10%, 90% {

    color: #111;

    text-shadow: none;

  }

}



.text-container > span:nth-child(2) {

  animation-delay: 0.25s;

}

.text-container > span:nth-child(3) {

  animation-delay: 0.5s;

}

.text-container > span:nth-child(4) {

  animation-delay: 0.75s;

}



#обучение #html #css