Здесь узнаете, как можно создать красивый эффект для знаков, это мигающей текст, который безусловно привлекает внимание гостей и пользователей при входе на сайт или открытие страницы. Делается он под различные акций, которые делают как пример на интернет магазинах.
Главный плюс, все сделано при помощи чистого стиля CSS, где не нужно подключать скриптов. Бывают несколько вариантов мигающего текста, но давайте разберем самые актуальные, это просто мигает, и сильное произведение крюка.
Первый вариант:
HTML
Код
<p id="milodsamtum">Первый вариант</p>
CSS
Код
#milodsamtum {
-webkit-animation: blink 3s linear infinite;
animation: blink 3s linear infinite;
font-weight: bold;
color: color: #1625ec;
}
@-webkit-keyframes blink {
0% { color: #1625ec; }
50% { color: #bbcfff; }
100% { color: #1625ec; }
}
@keyframes blink {
0% { color: #1625ec; }
50% { color: #bbcfff; }
100% { color: #1625ec; }
}
Скорость задаем самостоятельно. здесь установлено на 3s, чем меньше тем быстрей.
Демонстрация
Второй вариант:
HTML
Код
<div class="krasivaya-inimatsiya">Внимание</div>
CSS
Код
.krasivaya-inimatsiya {
text-align: center;
font-size: 6.3em;
color: #dcdbdb;
letter-spacing: -6px;
font-weight: 700;
text-transform: uppercase;
animation: blur .75s ease-out infinite;
text-shadow: 0px 0px 5px #ece8e8, 0px 0px 6px #f1ebeb;
}
@keyframes blur {
from {
text-shadow:0px 0px 8px #f9f8f7,
0px 0px 8px #f9f8f7,
0px 0px 23px #f9f8f7,
0px 0px 25px #f9f8f7,
0px 0px 23px #f9f8f7,
0px 0px 23px #f9f8f7,
0px 0px 23px #f9f8f7,
0px 0px 47px #f9f8f7,
0px 0px 47px #f9f8f7,
0px 0px 47px #f9f8f7,
0px 0px 47px #637c9c,
0px 0px 145px #637c9c,
0px 9px 98px #637c9c,
0px 9px 98px #637c9c,
0px 9px 98px #637c9c,
0px 9px 98px #637c9c,
0px -9px 98px #637c9c,
0px -9px 98px #637c9c;
}
}
Демонстрация
