phpjsJqueryhtmlcssblog

Как сделать мигающий текст в css?

"мигающий текст" - как сделать мигающий текст через css. Несколько вариантов, когда текст будет мигать, светиться и неоновый эффект!

Подробно о мигающем тексте через css

1. Мигающий текст!
2. Часто мигающий текст
3. Смена цвета текста
4. Мигающий текст - Лас-Вегас
5. Текст мигающий-вспыхивающий.
6. Мигающий текст в виде неоновой лампы.

Скопировать ссылку



Мигающий текст!

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

Длительность затухания 2 секунды.

Мигающий текст!
Html:

<blackblock id="blink">Мигающий текст!</blackblock>

Css:

<style>

blackblock {

background: black;

color: #fbff00;

font-size: 25px;

text-align: center;

display: block;

padding: 20px 0;

margin: 10px 0;

}

#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>

Скопировать ссылку



Часто мигающий текст!

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

Медленное затухание.

Длительность цикла 1 секунда.

Часто мигающий текст!
Html:

<blackblock id="blink_2 ">Мигающий текст!</blackblock>

Css:

<style>

blackblock {

background: black;

color: #fbff00;

font-size: 25px;

text-align: center;

display: block;

padding: 20px 0;

margin: 10px 0;

}

#blink_2 {

-webkit-animation: blink_2 1s linear infinite;

animation: blink_2 1s linear infinite;

}

@-webkit-keyframes blink_2 {

100% { color: rgba(34, 34, 34, 0); }

}

@keyframes blink_2 {

100% { color: rgba(34, 34, 34, 0); }

}

</style>

Скопировать ссылку



Смена цвета текста

Смена цвета текста
Html:

<div id="blink_3">Смена цвета текста</div>

Css:

<style>

#blink_3 {

-webkit-animation: blink_3 2s linear infinite;

animation: blink_3 2s linear infinite;

text-align: center;

font-weight: 900;

font-size: 50px;

text-transform: uppercase;

padding: 25px 0;

border: 1px solid;

}

@-webkit-keyframes blink_3 {

0% { color: rgb(0 0 0); }

10% { color: rgb(141 141 141); }

25% { color: rgb(191 191 191); }

50% { color: rgb(255 255 255); }

75% { color: rgb(249 255 0); }

85% { color: rgb(255 155 0); }

100% { color: rgb(0 0 0); }

}

@keyframes blink_3 {

0% { color: rgb(0 0 0); }

10% { color: rgb(141 141 141); }

25% { color: rgb(191 191 191); }

50% { color: rgb(255 255 255); }

75% { color: rgb(249 255 0); }

85% { color: rgb(255 155 0); }

100% { color: rgb(0 0 0); }

}

</style>

Скопировать ссылку



Мигающий текст - Лас-Вегас

Мигающий текст в виде иллюминации Лас-Вегаса.

Лас-Вегас
Html:

<div id="blink_4">Лас-Вегас</div>

Css:

<style>

#blink_4 {

position: relative;

font-weight: bold;

color: #30084f;

text-transform: uppercase;

font-size: 96px;

text-align: center;

padding: 36px 0;

margin: 10px 0;

border: 1px solid;

}

#blink_4: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: glaring .5s linear infinite alternate;

animation: glaring .5s linear infinite alternate;

}

@-webkit-keyframes glaring {

50% {background-size: 7px 7px, 3px 3px;}

100% {background-size: 3px 3px, 7px 7px;}

}

@keyframes glaring {

50% {background-size: 7px 7px, 3px 3px;}

100% {background-size: 3px 3px, 7px 7px;}

}

</style>

Скопировать ссылку



Текст мигающий-вспыхивающий.

Эффект мигающего - вспыхивающего текста:

Лас-Вегас
Html:

<div id="blink_5">Лас-Вегас</div>

Css:

<style>

#blink_5 {

color: rgb(245,245,245);

text-shadow: 0 -1px rgb(0 0 0 / 10%);

background: #8a59e5;

-webkit-animation: light 1.2s linear infinite;

animation: light 1.2s linear infinite;

font-weight: bold;

text-transform: uppercase;

font-size: 96px;

text-align: center;

padding: 40px 0;

margin: 10px 0;

}

#blink_5 {

color: rgb(245,245,245);

text-shadow: 0 -1px rgba(0,0,0,.1);

background: green;

-webkit-animation: light 1.2s linear infinite;

animation: light 1.2s linear infinite;

}

@-webkit-keyframes light {

50% { color: #fff; text-shadow: 0 -1px rgba(0,0,0,.3), 0 0 5px #ffd, 0 0 8px #fff; }

}

@keyframes light {

50% { color: #fff; text-shadow: 0 -1px rgba(0,0,0,.3), 0 0 5px #ffd, 0 0 8px #fff; }

}

</style>

Скопировать ссылку



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

Эффект css в виде неоновой вывески

Неоновый текст
Html:

<div class="sign-wrap-4">

<div class="sign_word">Не<span>он</span>овы<span>й</span> тек<span>ст</span></div>

</div>

css:

<style>

.sign-wrap-4 {

background: #337AB7;

text-align: center;

padding: 60px 20px;

}

.sign-wrap-4 .sign_word {

font-size: 40px;

font-weight: bold;

line-height: 50px;

color: #FFF;

font-family: 'Roboto Condensed', sans-serif;

text-transform: uppercase;

text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em #BFE2FF, 0 0 0.5em #BFE2FF, 0 0 0.1em #BFE2FF;

}

.sign-wrap-4 .sign_word span {

animation: neon-4 linear infinite 2s;

}

@keyframes neon-4 {

78% {

color: inherit;

text-shadow: inherit;

}

79%{

color: #0b3960;

}

80% {

text-shadow: none;

}

81% {

color: inherit;

text-shadow: inherit;

}

82% {

color: #0b3960;

text-shadow: none;

}

83% {

color: inherit;

text-shadow: inherit;

}

92% {

color: #0b3960;

text-shadow: none;

}

92.5% {

color: inherit;

text-shadow: inherit;

}

}

</style>

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---