Бесплатный ФРОНТЭНД

Бесплатный ФРОНТЭНД
Бесплатный ФРОНТЭНД

Представляю вашему вниманию бесплатные неоновые эффекты для текста на CSS.

1. Переливающийся неоновый текст

Совместимые браузеры:Chrom, Firefox, Opera, Safari.

Разметка HTML

<div class="neon">
<span class="text" data-text="thanks">thanks</span>
<span class="gradient"></span>
<span class="spotlight"></span>
</div>

Стили CSS

.neon {
position: relative;
overflow: hidden;
filter: brightness(200%);
}
.text {
background-color: black;
color: white;
font-size: 180px;
font-weight: bold;
font-family: sans-serif;
text-transform: uppercase;
position: relative;
user-select: none;
}
.text::before {
content: attr(data-text);
position: absolute;
color: white;
filter: blur(0.02em);
mix-blend-mode: difference;
}
.gradient {
position: absolute;
background: linear-gradient(45deg, red, gold, lightgreen, gold, red);
top: 0;
left: 0;
right: 0;
bottom: 0;
mix-blend-mode: multiply;
}
.spotlight {
position: absolute;
top: -100%;
left: -100%;
right: 0;
bottom: 0;
background:
radial-gradient(
circle,
white,
transparent 25%
) center / 25% 25%,
radial-gradient(
circle,
white,
black 25%
) center / 12.5% 12.5%;
animation: light 5s linear infinite;
mix-blend-mode: color-dodge;
}
@keyframes light {
to {
transform: translate(50%, 50%);
}
}
thanks

2. Мерцающий эффект неоновой вывески с использованием css и тени

Совместимые браузеры:Chrom, Firefox, Opera, Safari.

Разметка HTML

<h1 contenteditable spellcheck="false">open</h1>

Стили CSS

@import url(https://fonts.googleapis.com/css?family=Exo+2:200i);
:root {
/* Base font size */
font-size: 10px;

/* Set neon color */
--neon-text-color: #f40;
--neon-border-color: #08f;
}
h1 {
font-size: 13rem;
font-weight: 200;
font-style: italic;
color: #fff;
padding: 4rem 6rem 5.5rem;
border: 0.4rem solid #fff;
border-radius: 2rem;
text-transform: uppercase;
animation: flicker 1.5s infinite alternate;
}
h1::-moz-selection {
background-color: var(--neon-border-color);
color: var(--neon-text-color);
}
h1::selection {
background-color: var(--neon-border-color);
color: var(--neon-text-color);
}
h1:focus {
outline: none;
}
/* Animate neon flicker */
@keyframes flicker {

0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {

text-shadow:
-0.2rem -0.2rem 1rem #fff,
0.2rem 0.2rem 1rem #fff,
0 0 2rem var(--neon-text-color),
0 0 4rem var(--neon-text-color),
0 0 6rem var(--neon-text-color),
0 0 8rem var(--neon-text-color),
0 0 10rem var(--neon-text-color);

box-shadow:
0 0 .5rem #fff,
inset 0 0 .5rem #fff,
0 0 2rem var(--neon-border-color),
inset 0 0 2rem var(--neon-border-color),
0 0 4rem var(--neon-border-color),
inset 0 0 4rem var(--neon-border-color);
}

20%, 24%, 55% {
text-shadow: none;
box-shadow: none;
}
}

open

3. CSS NEON

Простой анимированный неоновый эффект, созданный с помощью CSS.

Совместимые браузеры:Chrom, Firefox, Opera, Safari.

Разметка HTML

<div class="sign">
<span class="sign__word">no</span>
<span class="sign__word">festival</span>
<span class="sign__word">today</span>
</div>

Стили CSS

/*-- Sign Styles --*/
.sign {
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&__word {
font-size: 5.6rem;
text-align: center;
line-height: 1;
color: #c6e2ff;
animation: neon .08s ease-in-out infinite alternate;
}
}
/*-- Animation Keyframes --*/
// animation
@keyframes neon {
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(30,132,242,0.52),
0 0 21px rgba(30,132,242,0.92),
0 0 34px rgba(30,132,242,0.78),
0 0 54px rgba(30,132,242,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(30,132,242,0.58),
0 0 22px rgba(30,132,242,0.84),
0 0 38px rgba(30,132,242,0.88),
0 0 60px rgba(30,132,242,1);
}
}
no festival today

4. Неоновый эффект

Совместимые браузеры:Chrom, Firefox, Opera, Safari.

Разметка HTML

<div class="container">
<h1 class="neon">Все, что вы хотите, это на другой стороне страха</h1>
</div>

Стили CSS

h1 {
font-weight: 400;
text-align: center;
text-transform: uppercase;
}
.neon {
color: #fff;
text-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 20px #fff,
0 0 40px #0ff,
0 0 80px #0ff,
0 0 90px #0ff,
0 0 100px #0ff,
0 0 150px #0ff;
}

ВсЁ, что вы хотите,
это на другой стороне страха

5. НЕОНОВЫЙ ПОТОК

Пульсирующая неоновая вывеска сделана с использованием многих обложила text-shadowС.

Совместимые браузеры:Chrom, Firefox, Opera, Safari.

Разметка HTML

<div class="container">
<div class="neon">Neon </div>
<div class="flux">Flux </div>
</div>

Стили CSS

@font-face {
font-family: neon;
src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/707108/neon.ttf);
}
<.container br=""> display: table-cell;
text-align: center;
vertical-align: middle;
}
.neon {
font-family: neon;
color: #FB4264;
font-size: 9vw;
line-height: 9vw;
text-shadow: 0 0 3vw #F40A35;
}
.flux {
font-family: neon;
color: #426DFB;
font-size: 9vw;
line-height: 9vw;
text-shadow: 0 0 3vw #2356FF;
}
.neon {
animation: neon 1s ease infinite;
-moz-animation: neon 1s ease infinite;
-webkit-animation: neon 1s ease infinite;
}
@keyframes neon {
0%,
100% {
text-shadow: 0 0 1vw #FA1C16, 0 0 3vw #FA1C16, 0 0 10vw #FA1C16, 0 0 10vw #FA1C16, 0 0 .4vw #FED128, .5vw .5vw .1vw #806914;
color: #FED128;
}
50% {
text-shadow: 0 0 .5vw #800E0B, 0 0 1.5vw #800E0B, 0 0 5vw #800E0B, 0 0 5vw #800E0B, 0 0 .2vw #800E0B, .5vw .5vw .1vw #40340A;
color: #806914;
}
}
.flux {
animation: flux 2s linear infinite;
-moz-animation: flux 2s linear infinite;
-webkit-animation: flux 2s linear infinite;
-o-animation: flux 2s linear infinite;
}
@keyframes flux {
0%,
100% {
text-shadow: 0 0 1vw #1041FF, 0 0 3vw #1041FF, 0 0 10vw #1041FF, 0 0 10vw #1041FF, 0 0 .4vw #8BFDFE, .5vw .5vw .1vw #147280;
color: #28D7FE;
}
50% {
text-shadow: 0 0 .5vw #082180, 0 0 1.5vw #082180, 0 0 5vw #082180, 0 0 5vw #082180, 0 0 .2vw #082180, .5vw .5vw .1vw #0A3940;
color: #146C80;
}
}
Neon
Flux


Понравилась статья?
Будем признательны, если поделитесь в соцсетях или мессенджерах, а также присоединитесь к нашей группе Вконтакте. Будет интересно!

Вас может заинтересовать:

Анимационные указатели прокрутки страницы
Анимационные указатели прокрутки страницы
Такие указатели чаще всего применяют на первом экране Главной страницы сайта, когда на ней размещена полноэкранная картинка, видео или слайдер. Чтобы показать Пользователю, что основной контент расположен ниже, в нижней части экрана размещают стрелку, направленную вниз. Чтобы привлечь к ней дополнительное внимание, её делаю анимационный...

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

Как создать пользовательский ползунок диапазона с помощью CSS
Как создать пользовательский ползунок диапазона с помощью CSS
Ползунки диапазона (<input type="range">) позволяют пользователям выбирать значение в пределах заданного диапазона, предоставляя альтернативные типы ввода, такие как <input type="number">.

Свойство clip-path
Свойство clip-path
Свойство clip-path в CSS позволяет указать конкретную область элемента для отображения, а остальная часть скрыта (или “обрезана”)...

Эффект вращения с помощью CSS3
Эффект вращения с помощью CSS3
CSS3 позволяет создавать разнообразные эффекты на сайтах без использования javascript и громоздкого flesh. Все последние версии современных браузеров позволяют использовать css3 в полном объеме. Если Вы считаете, что посетители вашего сайта люди прогрессивные и пользуются современными браузерами, которые постоянно обновляют, то Вы смело можете использовать новые технологоии и не заботиться о тех, кто все еще живет в прошлом веке и использует IE5…

Анимированные ссылки
Анимированные ссылки
Создание эффектов наведения ссылок CSS может добавить немного изюминки на скучную веб-страницу. Если вы когда-либо оказывались в тупике, пытаясь создать эффект плавного наведения, у меня есть шесть CSS-эффектов, которые вы можете взять и использовать для своего следующего проекта.

Мы используем файлы cookie. Они помогают улучшить ваше взаимодействие с сайтом.