» »

Мигающий текст на 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 Просмотров: 1337 Комментарий: (4)

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

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

Комментарий: 4
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

sweex1990
sweex1990 17.02.2018 05:553
0
Оно то круто, а как такое же сделать в меню. Вот например у меня на сайте есть "главная" "новости" и др. как сделать так, что бы только "новости" выделялись. вот пример кода <li><a href="/?a=news"><?=$lang['server19'];?></a></li> ссылка у меня берет с одного файла, а сам текст с другого, вот как этот код вставить в данную строку и что бы работало, уже задолбался и перерыл весь интернет. И пробовал по разному. Помогите плиз
Kosten
Kosten 17.02.2018 14:354
0
Если в меню делать, то через стили, лучше вам тему создать на форуме.
avatar