Текст №8
- 4,94 КБ
- HTML, CSS
- Текст
- анимация, неон
- Лицензия MIT
<h1 contenteditable spellcheck="false">открыто</h1>
@import url(https://fonts.googleapis.com/css?family=Exo+2:200i);
:root {
--neon-text-color: #f40;
--neon-border-color: #08f;
}
body {
font-family: "Exo 2", sans-serif;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
}
h1 {
font-size: 13rem;
font-weight: 200;
font-style: italic;
color: #fff;
padding: 4rem 6rem 5.5rem;
border: 0.4rem solid #fff;
-webkit-border-radius: 2rem;
-moz-border-radius: 2rem;
border-radius: 2rem;
text-transform: uppercase;
-webkit-animation: flicker 1.5s infinite alternate;
-moz-animation: flicker 1.5s infinite alternate;
-o-animation: flicker 1.5s infinite alternate;
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;
}
@-webkit-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);
-webkit-box-shadow: 0 0 0.5rem #fff, inset 0 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);
box-shadow: 0 0 0.5rem #fff, inset 0 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;
-webkit-box-shadow: none;
box-shadow: none;
}
}
@-moz-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);
-moz-box-shadow: 0 0 0.5rem #fff, inset 0 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);
box-shadow: 0 0 0.5rem #fff, inset 0 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;
-moz-box-shadow: none;
box-shadow: none;
}
}
@-o-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 0.5rem #fff, inset 0 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;
}
}
@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);
-webkit-box-shadow: 0 0 0.5rem #fff, inset 0 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);
-moz-box-shadow: 0 0 0.5rem #fff, inset 0 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);
box-shadow: 0 0 0.5rem #fff, inset 0 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;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
}
Предоставленный фрагмент кода является стильным способом создать эффект неонового текста с помощью HTML и CSS. Начинается он с определения элемента заголовка <h1>, который настраивается на возможность редактирования и отключение проверки орфографии, задавая основу для содержимого, которое будет стилизовано. Основная «магия» происходит в CSS, где и рождается этот эффект неонового свечения.
Во-первых, CSS код устанавливает основные стили для текста, такие как размер шрифта, цвет и расположение, создавая первоначальный визуальный вид текста. Затем добавляются специфические стили, такие как box-shadow и text-shadow, которые придают тексту живой и динамичный вид неонового света. Эти стили используют различные цвета и параметры размытия, чтобы создать иллюзию глубины и интенсивности свечения.
Наконец, в коде используется анимация CSS для добавления динамического эффекта к неоновому тексту. Анимация изменяет свойства свечения текста со временем, создавая эффект мерцания, который придает тексту реалистичное ощущение неонового света. Эта комбинация стилей и анимации текста создает эффектный и запоминающийся визуальный элемент, который может стать ярким акцентом веб-страницы или интерфейса.
