ZorNet.Ru — сайт для вебмастера » HTML и CSS » Мигающий текст на 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 Ноября 2017 Просмотров: 8440 Комментариев: (3)

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

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

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 3
Порядок вывода комментариев: Kosten 10 Ноября 2017 18:12¹ 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 10 Ноября 2017 18:26² 0 Ежели попытаетесь оформить в самой статье или описание, то заходим в режим HTML и прописываем в подходящем месте. Здесь уже мигать будет на разных оттенках цвета, что задаете сами, сколько палитры поставить. Всё довольно элементарно. Код установки: Код <a class="rainbow" >здесь ваш текст</a> CSS Код a.rainbow { color:white; text-decoration:none; -webkit-animation:rainbow 2s linear infinite alternate; -moz-animation:rainbow 2s linear infinite alternate; -ms-animation:rainbow 2s linear infinite alternate; -o-animation:rainbow 2s linear infinite alternate; animation:rainbow 2s linear infinite alternate; } @-webkit-keyframes rainbow { 0% {color:red; } 10% {color:orange; } 20% {color:gold; } 30% {color:yellow; } 40% {color:yellowgreen;} 50% {color:green; } 60% {color:cyan; } 70% {color:blue; } 80% {color:violet; } 90% {color:magenta; } 100% {color:indigo; } } @-moz-keyframes rainbow { 0% {color:red; } 10% {color:orange; } 20% {color:gold; } 30% {color:yellow; } 40% {color:yellowgreen;} 50% {color:green; } 60% {color:cyan; } 70% {color:blue; } 80% {color:violet; } 90% {color:magenta; } 100% {color:indigo; } } @-ms-keyframes rainbow { 0% {color:red; } 10% {color:orange; } 20% {color:gold; } 30% {color:yellow; } 40% {color:yellowgreen;} 50% {color:green; } 60% {color:cyan; } 70% {color:blue; } 80% {color:violet; } 90% {color:magenta; } 100% {color:indigo; } } @-o-keyframes rainbow { 0% {color:red; } 10% {color:orange; } 20% {color:gold; } 30% {color:yellow; } 40% {color:yellowgreen;} 50% {color:green; } 60% {color:cyan; } 70% {color:blue; } 80% {color:violet; } 90% {color:magenta; } 100% {color:indigo; } } @keyframes rainbow { 0% {color:red; } 10% {color:orange; } 20% {color:gold; } 30% {color:yellow; } 40% {color:yellowgreen;} 50% {color:green; } 60% {color:cyan; } 70% {color:blue; } 80% {color:violet; } 90% {color:magenta; } 100% {color:indigo; } } Kosten 17 Февраля 2018 14:35³ 0 Если в меню делать, то через стили, лучше вам тему создать на форуме.