В одной из прошлых статей по CSS , мы попытались с имитировать эффект неоновой вывески. И одна особенность, которую можно заметить в неоновых вывесках, заключается в том, что некоторые из них — особенно старые — имеют тенденцию мерцать. Свет как бы входит и выходит из них. Мы можем сделать то же самое с CSS-анимацией!
В одной из прошлых статей по CSS, мы попытались с имитировать эффект неоновой вывески. И одна особенность, которую можно заметить в неоновых вывесках, заключается в том, что некоторые из них — особенно старые — имеют тенденцию мерцать. Свет как бы входит и выходит из них. Мы можем сделать то же самое с CSS-анимацией!
Эффект мерцания
Для анимации в CSS мы будем использовать ключевые кадры @keyframes.
Давайте перейдем к @keyframes, чтобы сделать анимацию, которая включает и выключает свет быстрыми, кажущимися случайными вспышками.
CSS код:
/* CSS */
.neonText {
color: #fff;
}
h1 {
font-size: 4.2rem;
animation: flicker 1.5s infinite alternate;
}
/* Анимация мерцания */
@keyframes flicker {
0%, 18%, 22%, 25%, 53%, 57%, 100% {
text-shadow:
0 0 4px #fff,
0 0 11px #fff,
0 0 19px #fff,
0 0 40px #0fa,
0 0 80px #0fa,
0 0 90px #0fa,
0 0 100px #0fa,
0 0 150px #0fa;
}
20%, 24%, 55% {
text-shadow: none;
}
}
/* Дополнительный стиль */
h2 {
font-size: 1.8rem;
}
.container {
margin-top: 20vh;
}
body {
font-size: 18px;
font-family: "Helvetica Neue", sans-serif;
background-color: #010a01;
}
h1, h2 {
text-align: center;
text-transform: uppercase;
font-weight: 400;
}
Мы взяли точно такое же свойство и значения text-shadow, как и раньше, завернули их в анимацию @keyframes под названием flicker и выбрали точки 0%, 18%, 22%, 25%, 53%, 57%, 100% на временной шкале для применения теней, а также точки - 20%, 24%, 55%, которые полностью удаляют тени.
Все, что осталось, - это вызвать анимацию, в которой мы хотим видеть мерцание. В данном конкретном случае давайте добавим его только в элемент h1. Мерцание части текста кажется немного более реалистичным, чем если бы мы применили мерцание ко всему тексту.
html код:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1 class="neonText">
Welcome to!
</h1>
<h2 class="neonText">MyRusakov.ru</h2>
</div>
</body>
</html>
То же, для всего текста:
.neonText {
animation: flicker 1.5s infinite alternate;
color: #fff;
}
h1 {
font-size: 4.2rem;
}
Это довольно классный эффект и добавляет больше реализма нашему неоновому тексту! Конечно, есть и другие эффекты, которые вы тоже можете попробовать.
