» »

Мигающий текст на HTML и CSS

Мигающий текст на HTML и CSS

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

Его иногда создают на скрипте, но здесь все будет работать на чистых стилях, что намного по установке легче и безусловно не будет такой нагрузки на интернет ресурс.

Для создание его, нам нужно прописать стили в CSS.

Код
#blink {  
  -webkit-animation: blink 2s linear infinite;  
  animation: blink 2s linear infinite;  
}  
@-webkit-keyframes blink {  
  50% { color: rgb(34, 34, 34); }  
  51% { color: rgba(34, 34, 34, 0); }  
  100% { color: rgba(34, 34, 34, 0); }  
}  
@keyframes blink {  
  50% { color: rgb(34, 34, 34); }  
  51% { color: rgba(34, 34, 34, 0); }  
  100% { color: rgba(34, 34, 34, 0); }  
}

В последствие как установили стилистику, на сайт, вам нужно указать в поле тегов ID = blink и он станет мигать.

Код
<h2 id="blink">Разное описание под рекламу, где миганием привлекает обзор</h2>  
<p id="blink">Здесь ваш текст, что мигать будет</p>

Все редактирование происходит в настройках стилей, там задаем функционал, как он должен мигать, это быстро или наоборот медленно, как вам нужно.
09.11.2017 Просмотров: 297 Комментарий: (2)

Поделиться в социальных сетях

Материал разместил

Комментарий: 2
Kosten
Kosten 10.11.2017 18:121
0
Помигивающий контент на страничках интернет-сайта завлекает интерес гостей, а означает имеет возможность удачно использоваться при размещении надписей с проводимыми промо акциям либо скидкам в веб-торговых центрах. Ранее все реализации были базируются на скриптах javascript, однако с приходом таблиц каскадных стилей третьего поколения CSS 3 творение мигающего слова упростилась.

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



Здесь идет в красном оттенке и мигает не сильно по скорости.

CSS

Код
#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; }  
}


Ставим так где вам нужно.

Код
<p id="blink">Первый вариант</p>
Kosten
Kosten 10.11.2017 18:262
0
Ежели попытаетесь оформить в самой статье или описание, то заходим в режим HTML и прописываем в подходящем месте. Здесь уже мигать будет на разных оттенках цвета, что задаете сами, сколько палитры поставить.

Всё довольно элементарно.

Код установки:

Код
<a class="rainbow" >здесь ваш текст</a>


CSS

avatar