Неоновый текст на CSS

Во всех примерах используется шрифт Roboto

Вариант 1:

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

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

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

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

</div>

.sign-wrap-1 {
	background: #337AB7;
	text-align: center;
	padding: 60px 20px;
}
.sign-wrap-1 .sign_word {
	font-size: 40px;
	font-weight: bold;
	line-height: 50px;
	color: #FFF;
	font-family: 'Roboto', sans-serif;
	text-transform: uppercase;
	animation: neon-1 .1s ease-in-out infinite alternate;
}
@keyframes neon-1 {
	from {
		text-shadow: 0 0 6px rgba(202, 228, 225, 0.92), 0 0 30px rgba(202, 228, 225, 0.34), 0 0 12px rgba(191, 226, 255, 0.52), 0 0 21px rgba(191, 226, 255, 0.92), 0 0 34px rgba(191, 226, 255, 0.78), 0 0 54px rgba(191, 226, 255, 0.92);
	}
	to {
		text-shadow: 0 0 6px rgba(202, 228, 225, 0.98), 0 0 30px rgba(202, 228, 225, 0.42), 0 0 12px rgba(191, 226, 255, 0.58), 0 0 22px rgba(191, 226, 255, 0.84), 0 0 38px rgba(191, 226, 255, 0.88), 0 0 60px #FFF;
	}
}

.sign-wrap-1 {

background: #337AB7;

text-align: center;

padding: 60px 20px;

}

.sign-wrap-1 .sign_word {

font-size: 40px;

font-weight: bold;

line-height: 50px;

color: #FFF;

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

text-transform: uppercase;

animation: neon-1 .1s ease-in-out infinite alternate;

}

@keyframes neon-1 {

from {

text-shadow: 0 0 6px rgba(202, 228, 225, 0.92), 0 0 30px rgba(202, 228, 225, 0.34), 0 0 12px rgba(191, 226, 255, 0.52), 0 0 21px rgba(191, 226, 255, 0.92), 0 0 34px rgba(191, 226, 255, 0.78), 0 0 54px rgba(191, 226, 255, 0.92);

}

to {

text-shadow: 0 0 6px rgba(202, 228, 225, 0.98), 0 0 30px rgba(202, 228, 225, 0.42), 0 0 12px rgba(191, 226, 255, 0.58), 0 0 22px rgba(191, 226, 255, 0.84), 0 0 38px rgba(191, 226, 255, 0.88), 0 0 60px #FFF;

}

Вариант 2:

Вариант, похожий на первый, только с более медленным миганием

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

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

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

</div>

.sign-wrap-2 {
	background: #337AB7;
	text-align: center;
	padding: 60px 20px;
}
.sign-wrap-2 .sign_word {
	font-size: 40px;
	font-weight: bold;
	line-height: 50px;
	color: #FFF;
	font-family: 'Roboto', sans-serif;
	text-transform: uppercase;
	animation: 2s neon-2 alternate-reverse infinite;
}
@keyframes neon-2 {
	from {
		text-shadow: 0 0 5px #FFF,
		0 0 10px #FFF,
		0 0 15px #FFF,
		0 0 20px #BFE2FF;
	}
	to {
		text-shadow: 0 0 20px #BFE2FF,
		0 0 35px #BFE2FF,
		0 0 40px #BFE2FF,
		0 0 50px #BFE2FF,
		0 0 800px #BFE2FF;
	}
}

.sign-wrap-2 {

background: #337AB7;

text-align: center;

padding: 60px 20px;

}

.sign-wrap-2 .sign_word {

font-size: 40px;

font-weight: bold;

line-height: 50px;

color: #FFF;

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

text-transform: uppercase;

animation: 2s neon-2 alternate-reverse infinite;

}

@keyframes neon-2 {

from {

text-shadow: 0 0 5px #FFF,

0 0 10px #FFF,

0 0 15px #FFF,

0 0 20px #BFE2FF;

}

to {

text-shadow: 0 0 20px #BFE2FF,

0 0 35px #BFE2FF,

0 0 40px #BFE2FF,

0 0 50px #BFE2FF,

0 0 800px #BFE2FF;

}

Вариант 3:

Загорающийся и потухающий текст

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

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

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

</div>

.sign-wrap-3 {
	background: #337AB7;
	text-align: center;
	padding: 60px 20px;
}
.sign-wrap-3 .sign_word {
	font-size: 40px;
	font-weight: bold;
	line-height: 50px;
	color: #FFF;
	font-family: 'Roboto', sans-serif;
	text-transform: uppercase;
	animation: neon-3 5s steps(1, start) infinite reverse;
}
@keyframes neon-3 {
	0%{
		color: #0b3960;
		text-shadow: 0 0 7px #0b3960, 0 0 8px #0b3960;
	}
	80%{
		color: #fff;
		text-shadow: 0 0 6px #fff,0 0 10px #fff,0 0 50px #79a7fc;
	}
	81%{
		color: #E1F5FE;
		text-shadow: 0 0 6px #fff,0 0 10px #fff,0 0 50px #79a7fc;
	}
	82%{color: #0b3960;
		text-shadow: 0 0 7px #0b3960, 0 0 8px #0b3960;
	}
	83%{
		color: #E1F5FE;
		text-shadow: 0 0 6px #fff,0 0 10px #fff,0 0 50px #79a7fc;
	}
	84%{
		color: #0b3960;
		text-shadow: 0 0 7px #0b3960, 0 0 8px #0b3960;
	}
	85%{
		color: #E1F5FE;
		text-shadow: 0 0 6px #fff,0 0 10px #fff,0 0 50px #79a7fc;
	}
	100%{
		color: #0b3960;
		text-shadow: 0 0 7px #0b3960,0 0 8px #0b3960;
	}
}

.sign-wrap-3 {

background: #337AB7;

text-align: center;

padding: 60px 20px;

}

.sign-wrap-3 .sign_word {

font-size: 40px;

font-weight: bold;

line-height: 50px;

color: #FFF;

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

text-transform: uppercase;

animation: neon-3 5s steps(1, start) infinite reverse;

}

@keyframes neon-3 {

0%{

color: #0b3960;

text-shadow: 0 0 7px #0b3960, 0 0 8px #0b3960;

}

80%{

color: #fff;

text-shadow: 0 0 6px #fff,0 0 10px #fff,0 0 50px #79a7fc;

}

81%{

color: #E1F5FE;

text-shadow: 0 0 6px #fff,0 0 10px #fff,0 0 50px #79a7fc;

}

82%{color: #0b3960;

text-shadow: 0 0 7px #0b3960, 0 0 8px #0b3960;

}

83%{

color: #E1F5FE;

text-shadow: 0 0 6px #fff,0 0 10px #fff,0 0 50px #79a7fc;

}

84%{

color: #0b3960;

text-shadow: 0 0 7px #0b3960, 0 0 8px #0b3960;

}

85%{

color: #E1F5FE;

text-shadow: 0 0 6px #fff,0 0 10px #fff,0 0 50px #79a7fc;

}

100%{

color: #0b3960;

text-shadow: 0 0 7px #0b3960,0 0 8px #0b3960;

}

Вариант 4:

Вариант, похожий на предыдущий, только загораются и тухнут определенные буквы

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

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

</div>

.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', 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;
	}
}

.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', 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;

}

Настюха: 01.02.2021 в 19:44

Всё отлично. Использовала первую. Спасибо большое.

Ответить
пророк: 08.12.2020 в 20:53

в html не работает((

Ответить
- Alexander: 08.12.2020 в 22:29
  
  у меня? 🙂
  а если у вас, то как я могу что то сказать по этому поводу, не видя
  
  Ответить
- Оло-ло: 30.06.2023 в 07:30
  
  раздели файл стилей на несколько файлов и подключи - все заработает 😉
  
  Ответить

Вариант 1:

Вариант 2:

Вариант 3:

Вариант 4:

Смотрите также:

Размер шрифта в зависимости от ширины блока

Кнопка "вверх" и варианты ее оформления

Круговая пульсация на элементах

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

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