Программы
Музыка
Игры
Заработок и Раскрутка
GPS навигация
» » Варианты Мигающего текста - HTML/CSS
Информация к новости
  • Просмотров: 986
  • Автор: hazardcd
  • Дата: 17-08-2016, 10:30
  • Не нравится
  • 0
  • Нравится
17-08-2016, 10:30

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

Категория: Вебмастер / Скрипты, Коды / Текст

С помощью анимации 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>

 

 

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
HTML-cсылка:
BB-cсылка:
Прямая ссылка:

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

Имя:*
E-Mail:
Комментарий:
  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
Подтвердите что вы не робот: *