CSS Текст №6 - пример кода

Демо

2,01 КБ
HTML, CSS
Текст
анимация, неон, свечение
Лицензия MIT

Код
Редактор

HTML

<a href="#">Неон</a>

CSS

@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
a {
    text-transform: uppercase;
    font-size: 7rem;
    line-height: 1;
    text-decoration: none;
    color: #fff;
    font-family: "Press Start 2P", system-ui;
    -webkit-animation: neon 1.5s ease-in-out infinite alternate;
    -moz-animation: neon 1.5s ease-in-out infinite alternate;
    -o-animation: neon 1.5s ease-in-out infinite alternate;
    animation: neon 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes neon {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #b6ff00, 0 0 70px #b6ff00, 0 0 80px #b6ff00, 0 0 100px #b6ff00, 0 0 150px #b6ff00;
    }
    to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #b6ff00, 0 0 35px #b6ff00, 0 0 40px #b6ff00, 0 0 50px #b6ff00, 0 0 75px #b6ff00;
    }
}
@-moz-keyframes neon {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #b6ff00, 0 0 70px #b6ff00, 0 0 80px #b6ff00, 0 0 100px #b6ff00, 0 0 150px #b6ff00;
    }
    to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #b6ff00, 0 0 35px #b6ff00, 0 0 40px #b6ff00, 0 0 50px #b6ff00, 0 0 75px #b6ff00;
    }
}
@-o-keyframes neon {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #b6ff00, 0 0 70px #b6ff00, 0 0 80px #b6ff00, 0 0 100px #b6ff00, 0 0 150px #b6ff00;
    }
    to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #b6ff00, 0 0 35px #b6ff00, 0 0 40px #b6ff00, 0 0 50px #b6ff00, 0 0 75px #b6ff00;
    }
}
@keyframes neon {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #b6ff00, 0 0 70px #b6ff00, 0 0 80px #b6ff00, 0 0 100px #b6ff00, 0 0 150px #b6ff00;
    }
    to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #b6ff00, 0 0 35px #b6ff00, 0 0 40px #b6ff00, 0 0 50px #b6ff00, 0 0 75px #b6ff00;
    }
}

HTML
CSS

Представленный код создает визуально захватывающий эффект для текста на веб-странице, заставляя его светиться, как неоновая вывеска. Представьте себе жужжание неоновых знаков, освещающих ночную улицу в оживленном городе; вот к чему мы стремимся с нашим веб-текстом.

Начиная с HTML, у нас есть простой якорный тег <a href="#"> с текстом «Неон». Это каркас нашего проекта, текст, который мы хотим подсветить в неоновом стиле. Теперь магия происходит в CSS, где мы определяем, как этот текст превратится в нечто привлекающее внимание.

В CSS большое внимание уделяется анимации и стилизации текста. Мы используем пользовательский шрифт, импортированный из Google Fonts, чтобы сразу придать нашему тексту уникальный вид. Шрифт «Press Start 2P» имеет пиксельный, ретро-игровой вайб, дополняющий неоновый эффект, к которому мы стремимся. CSS-правила для якорного тега подготавливают почву для неонового эффекта, делая текст заглавными буквами, увеличивая его размер и устанавливая его цвет на белый, что критически важно для светящегося эффекта.

Сердцем неонового вида являются свойства animation и text-shadow. Анимация с названием «neon» задана продолжительностью 1,5 секунды с функцией сглаживания ease-in-out, создавая плавный переход между кадрами анимации и бесконечный цикл для поддержания работы анимации. Ключевые кадры для анимации «neon» изменяют тень текста, имитируя светящийся эффект, переходя от более интенсивного свечения к более тусклому и обратно. Цвета, используемые в тени текста — белый и ярко-лаймовый зеленый — создают иконичный свет неоновых вывесок, с различной радиусом размытия для усиления иллюзии глубины и яркости.

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