Блог Андрея Юрченко

Авторский блог с полезными статьями по темам: создание сайта, заработок на сайте, заработок в интернете, работа на дому, работа в интернете, инфобизнес

Мигающий или анимированный текст

Привет друзья! На днях столкнулся с тем, что нужно было реализовать на сайте анимацию текста или проще говоря, чтобы написанный текст мигал. Конечно можно было найти какой-нибудь скрипт и подключить его к сайту, но решено было сделать все на чистом CSS.

мигающий текст, анимация текста, анимированный текст

Возможно ли это и как это сделать, спросите вы? Да, в общем-то реализовать такую функцию- заставить любой текст мигать или придать ему какой-нибудь эффект совершенно не сложно. И все можно сделать при помощи нескольких строчек кода стилей CSS.

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

Мигающий текст с определенной частотой

Вам понадобится следующий код, в котором частота мигания меняется выбором выделенного значения, а цвет задается командой color :

#blink1 {
-webkit-animation: blink1 3.5s linear infinite;
animation: blink1 3.5s linear infinite;
}
@-webkit-keyframes blink1 {
50% { color: rgb(34, 34, 34); }
51% { color: rgba(34, 34, 34, 0); }
100% { color: rgba(34, 34, 34, 0); }
}
@keyframes blink1 {
50% { color: rgb(34, 34, 34); }
51% { color: rgba(34, 34, 34, 0); }
100% { color: rgba(34, 34, 34, 0); }
}

Данный код вставляете в файл стилей, а текст прописываете следующим образом:

<h2 id=»blink1″>Образец текста</h2>

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

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

Текст задается по аналогии с предыдущим:

<h2 id=»blink2″>Образец текста</h2>

Резкое появление текста

#blink3 {
-webkit-animation: blink3 1s linear infinite;
animation: blink3 1s linear infinite;
}
@-webkit-keyframes blink3 {
100% { color: rgba(34, 34, 34, 0); }
}
@keyframes blink3 {
100% { color: rgba(34, 34, 34, 0); }
}

<h2 id=»blink3″>Образец текста</h2>

Плавное мелькание

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

<h2 id=»blink4″>Образец текста</h2>

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

@-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;}
}
#blink5 {
position: relative;
font-weight: bold;
color: #30084f;
}
#blink5: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;
}

<h2 id=»blink5″>Образец текста</h2>

На следующий вариант посмотрите подольше и увидите эффект

Сверкающий текст

@-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;
}

<h2 id=»blink6″>Образец текста</h2>

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

@-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;
}

<h2 id=»blink7″>Образец текста</h2>

Вот такие эффекты мигания текста и анимацию можно сделать на чистом CSS, не прибегая к сторонним скриптам и прочим хитростям.

Надеюсь данная статья Вам будет полезна и приведенные коды найдут свое место на вашем сайте. А пока все, будут вопросы- задавайте и конечно-же оставляйте свои комментарии к данной статье.

С уважением, Андрей Юрченко

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

Подпишись на RSS-рассылку и получай новые статьи на почту!

Введите свой e-mail:

МАГИЧЕСКИЙ ШАБЛОН ПОДПИСНОЙ СТРАНИЦЫ В ПОДАРОК, ЗАБИРАЙТЕ

Оставить комментарий:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Комментарии Вконтакте:

Content Tab Three

Блог Андрея Юрченко © 2016

ВВЕРХ