RealAdmin.ru

Мигающий текст на html сайте с помощью CSS стилей

CSS,HTML
Категория: Сайтострой
15 Дек 2014 г. в 21:24

Мигающий текст на страницах сайта привлекает внимание посетителей, а значит может успешно применяться при размещении надписей с проводимыми акциям или скидкам в интернет-магазинах. Раньше все реализации были основаны на скриптах 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>

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

Напомню, CSS 3 не поддерживается старыми браузерами. Не удивляйтесь если анимация не заработает в Internet Explorer 9 или FireFox 3.6. Но и игнорировать из-за этого современные веб-технологии не стоит.

Теги:
CSS
Посмотрите похожее — 6
Комментарии — 3
  1. Комментарий был удален.
    1. Комментарий был удален.
      1. avatar gartes 14 сентября 2016, 00:53 #
        Супер… Стопарилка вызывает умиление ))) +++ Класс!
        © REALADMIN.RU   2016 г.
        Страница сгенерирована: 0,0978 s | 10 mb.
        На каком уровне Вы играете в шахматы?
        О П Р О С
        Home Question Top