Мигающий текст на CSS для привлечения внимания

Мигающий текст на CSS для привлечения внимания
Комментарии: 6

Мигающий текст на страницах сайта привлекает внимание, а значит может применяться для размещения надписей с акциям и скидками в интернет-магазинах. Раньше реализации были основаны на javascript, но с появлением CSS 3-го поколения, создание мигающего текста упростилось.

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

<style>
#blink {
	-webkit-animation: blink 2s linear infinite; 
	animation: blink 2s linear infinite; 
	font-weight: bold; 
	color: color: #F00; 
}

@-webkit-keyframes blink { 
	0% { color: #F00; }
	50% { color: #FBB; }
	100% { color: #F00; }
}

@keyframes blink {  
	0% { color: #F00; }
	50% { color: #FBB; }
	100% { color: #F00; } 
}
</style>

<p id="blink">Первый вариант</p>

В примере мы создали плавный переход от красного цвета шрифта к розовому и обратно. Блок @-webkit-keyframes blink и @keyframes повторяет фреймы, это из-за того что разные браузеры поддерживают разные свойства css анимации.

Этот вариант смотрится отлично на тёмном фоне. Он выглядит сложнее и должен дать понять что комбинируя различные свойства можно добиться множества вариантов пульсации и переливания надписей.

<style>
#blink-2{
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  animation:blur .75s ease-out infinite;
  text-shadow:text-shadow: 0 0 5px #abc, 0 0 7px #abc;
}

@keyframes blur{
  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;}
}
</style>
<p id="blink-2">Второй вариант</p>

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

Темы:
CSSHTML
Ещё интересное — 6
Комментарии —
  1. Комментарий был удален.
    1. Комментарий был удален.
      1. gartes
        gartes14 сентября 2016, 00:53#
        Супер… Стопарилка вызывает умиление ))) +++ Класс!
        1. Ирина
          Ирина03 апреля 2017, 20:46#
          Благодарю за стиль. Скажите почему он не работает из файла цсс, но работает только непосредственно в документе хтмл?
          1. Andy Si03 апреля 2017, 21:44(был изменён)#
            Должен работать и из CSS файла. Может неправильный путь к CSS файлу или ошибки в нём. Может с тегами style вставили в файл? Проверяйте.
          2. Rostislav Sofronov
            Rostislav Sofronov26 января 2018, 19:52#
            Спасибо! Применил ето в моём новом плагине =) https://c2n.me/3RolfPN
            © REALADMIN.RU   2024 г.
            Страница сгенерирована: 0,1900 s | 4 mb.
            На каком уровне Вы играете в шахматы?
            OPROS