Новый год
/ Ваше разрешение экрана: px / Ваш Ip адрес: {ip}

Shop Scripts

Варианты Мигающего текста HTML/CSS

3-06-2018, 16:54

С помощью анимации CSS можно заставить мигать блок как угодно. Если вместо цвета color использовать opacity или visible, то моргать будет весь элемент.

За скорость (частоту) мигания отвечает цифра рядом с символом s.


<style>
#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); }
}
</style>

Вызов процедуры:

<h2 id="blink">Образец</h2>

Плавно мигающий текст

<style>
#blink1 {
  -webkit-animation: blink1 3s linear infinite;
  animation: blink1 3s linear infinite;
}
@-webkit-keyframes blink1 {
  0% { color: rgba(34, 34, 34, 1); }
  50% { color: rgba(34, 34, 34, 0); }
  100% { color: rgba(34, 34, 34, 1); }
}
@keyframes blink1 {
  0% { color: rgba(34, 34, 34, 1); }
  50% { color: rgba(34, 34, 34, 0); }
  100% { color: rgba(34, 34, 34, 1); }
}
</style>

Вызов процедуры:

<h2 id="blink1">Образец</h2>

Резко появляющийся текст

<style>
#blink2 {
  -webkit-animation: blink2 1s linear infinite;
  animation: blink2 1s linear infinite;
}
@-webkit-keyframes blink2 {
  100% { color: rgba(34, 34, 34, 0); }
}
@keyframes blink2 {
  100% { color: rgba(34, 34, 34, 0); }
}
</style>

Вызов процедуры:

<h2 id="blink2">Образец</h2>

Не агрессивное мелькание названия сайта

<style>
#blink5 {
  -webkit-animation: blink5 2s linear infinite;
  animation: blink5 2s linear infinite;
}
@-webkit-keyframes blink5 {
  0% { color: rgb(128, 0, 0); }
  50% { color: rgb(183, 65, 14); }
  100% { color: rgb(128, 0, 0); }
}
@keyframes blink5 {
  0% { color: rgb(128, 0, 0); }
  50% { color: rgb(183, 65, 14); }
  100% { color: rgb(128, 0, 0); }
}
</style>

Имеет значение соотношение цветов фона и текста. Вызов процедуры:

<h2 id="blink5">Образец</h2>

Блестящий текст

<style>
@-webkit-keyframes flicker {
  50% {background-size: 7px 7px, 3px 3px;}
  100% {background-size: 3px 3px, 7px 7px;}
}
@keyframes flicker {
  50% {background-size: 7px 7px, 3px 3px;}
  100% {background-size: 3px 3px, 7px 7px;}
}
#blink3 {
  position: relative;
  font-weight: bold;
  color: #30084f;
}
#blink3:before {
  content: "";
  position:absolute; top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(rgba(255,255,255,1) 1px, rgba(255,255,255,0) 1px), radial-gradient(rgba(255,255,255,1) 1px, rgba(255,255,255,0) 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0% 50%;
  -webkit-animation: flicker .5s linear infinite alternate;
  animation: flicker .5s linear infinite alternate;
}
</style>

 Вызов процедуры:

<h2 id="blink3">Образец</h2>

Текст на сверкающем фоне

<style>
@-webkit-keyframes blink6 {
 10% { transform: scale(1, 1) rotate(80deg); }
 20% { transform: scale(0, 0) rotate(160deg); }
 100% { transform: scale(0, 0) rotate(0deg); }
}
@keyframes blink6 {
 10% { transform: scale(1, 1) rotate(80deg); }
 20% { transform: scale(0, 0) rotate(160deg); }
 100% { transform: scale(0, 0) rotate(0deg); }
}
#blink6 {
  position: relative;
  display: inline-block;
  color: #fff;
  text-shadow: 0 0 10px #3d7a97;
  background: #064578;
}
#blink6:after, #blink6:before {
  content: "";
  position: absolute; top: 0; left: 0;
  display: block;
  width: 100px;
  height: 100px;
  background-image: 
    radial-gradient(rgba(255,255,255,1), rgba(255,255,255,0) 30%),
    linear-gradient(45deg, rgba(0,0,0,0) 49%, rgba(255,255,255,.4) 50%, rgba(0,0,0,0) 51%),
    linear-gradient(135deg, rgba(0,0,0,0) 49%, rgba(255,255,255,.4) 50%, rgba(0,0,0,0) 51%);
  -webkit-animation: blink6 10s linear infinite;
  animation: blink6 10s linear infinite;
  transform: scale(0, 0) rotate(0deg);
}
#blink6:before {
  top: -30%;
  right: 0; left: auto;
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}
</style>

Вызов процедуры:

<div id="blink6">Образец</div>

Светящийся текст

<style>
@-webkit-keyframes pulsate {
 50% { color: #fff; text-shadow: 0 -1px rgba(0,0,0,.3), 0 0 5px #ffd, 0 0 8px #fff; }
}
@keyframes pulsate {
 50% { color: #fff; text-shadow: 0 -1px rgba(0,0,0,.3), 0 0 5px #ffd, 0 0 8px #fff; }
}
#blink7 {
  color: rgb(245,245,245);
  text-shadow: 0 -1px rgba(0,0,0,.1);
  background: green;
  -webkit-animation: pulsate 1.2s linear infinite;
  animation: pulsate 1.2s linear infinite;
}
</style>

Вызов процедуры:

<div id="blink7">Образец</div>

 


Нашли ошибку?
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Рекомендуем Вам зарегистрироваться или войти на сайт под своим логином, чтобы полноправно пользоваться сайтом и иметь доступ ко всем материалам.
Категория: Текстовые эффекты

Важно: если не отображается страница новости или ее часть просьба отключить блокировщик рекламы. Проблема может возникать из-за того что скрипт сайта реагирует на программы подобного типа.
Также Вы можете сообщить о проблеме или ошибке и ознакомиться с ответами пользователей.

Добавление комментария

Имя:*
E-Mail:
Комментарий:
Введите два слова, показанных на изображении: *
Это интересно
Поиск и оплата штрафов ГИБДД/Налогов/Исполнительных производств
Новости Портала

Украшения сайта к Новому году

Простые скрипты, которые украсят Ваш сайт в Новогодние и Рождественские праздники.

ADEN VIDEO. Мега набор видеоуроков. Художественная обработка (2017-2019) WEBRip

Большой сборник видеоуроков Алексея Денисова. В котором Вы найдете авторские видеоуроки по обработке фотографии и не только. В уроках использованы программы Photoshop, Lightroom, Camera Raw, After ...

Вооружённые силы стран мира (подшивка №01-250)

Еженедельная коллекция журналов "Вооруженные силы стран мира" расскажет о военных соединениях разных стран мира, познакомит читателя с видами войск и военной техники, историей военных кампаний 20-21 ...
Реклама Партнеров
Поддержите проект
Статистика

 
Скрипт социальных кнопок