Как сделать мигающий текст в css?
"мигающий текст" - как сделать мигающий текст через css. Несколько вариантов, когда текст будет мигать, светиться и неоновый эффект!
Подробно о мигающем тексте через css
- Мигающий текст!
- Часто мигающий текст
- Смена цвета текста
- Мигающий текст - Лас-Вегас
- Текст мигающий-вспыхивающий.
- Мигающий текст в виде неоновой лампы.
Мигающий текст!
Резкое появление текста и плавное затухание!
Длительность затухания 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>
Этим вы очень поможете проекту! Заранее огромное спасибо!
