Code Ready | Frontend

✅ Как создать анимацию вспышки?



Эффект вспышки - очень простой способ поймать зрительный контакт с каждым пользователем. Он использует лишь одно правильно настроенное свойство text-shadow.

Данная анимация работает непрерывно, поэтому текст с этим эффектом будет легко заметить.



Делимся готовым кодом ниже для создания анимации вспышки на чистом CSS: ⤵️

body {

  background-color: #000;

  text-align: center;

}



h1 { 

  font-size: 40px;

  color: #fff;

  font-family: sans-serif;

  text-transform: uppercase;

  animation: flash 1s ease-in infinite;

}



@keyframes flash {

from {

   text-shadow: 0px 0px 10px #fff, 0px 0px 10px #fff,  0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff,0px 0px 50px #fff, 0px 0px 50px #fff, 0px 0px 50px #7B96B8, 0px 0px 150px #7B96B8, 0px 10px 100px #7B96B8, 0px 10px 100px #7B96B8, 0px 10px 100px #7B96B8, 0px 10px 100px #7B96B8, 0px -10px 100px #7B96B8, 0px -10px 100px #7B96B8;

  }

}

#практика #css