• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Мигающий текст при помощи HTML + CSS (Создать мигающий текст на сайте без скриптов)
Мигающий текст при помощи HTML + CSS
Kosten
Дата: Четверг, 27.09.2018, 23:38 | Сообщение 1
Администраторы
Сообщений:18252
Награды: 55


Здесь узнаете, как можно создать красивый эффект для знаков, это мигающей текст, который безусловно привлекает внимание гостей и пользователей при входе на сайт или открытие страницы. Делается он под различные акций, которые делают как пример на интернет магазинах.

Главный плюс, все сделано при помощи чистого стиля 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;
  }
}


Демонстрация
Прикрепления: 6922239.png(25.0 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Мигающий текст при помощи HTML + CSS (Создать мигающий текст на сайте без скриптов)
  • Страница 1 из 1
  • 1
Поиск: