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

Демо

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

Код
Редактор

HTML

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

CSS

@import url("https://fonts.googleapis.com/css2?family=Lobster&display=swap");
a {
    text-transform: uppercase;
    font-size: 7rem;
    line-height: 1;
    text-decoration: none;
    color: #fff;
    font-family: Lobster;
    -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 #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
    }
    to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de;
    }
}
@-moz-keyframes neon {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
    }
    to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de;
    }
}
@-o-keyframes neon {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
    }
    to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de;
    }
}
@keyframes neon {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
    }
    to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de;
    }
}

HTML
CSS

Фрагмент кода демонстрирует увлекательный способ добавления эффекта неонового свечения к тексту с использованием HTML и CSS, создавая анимацию, которая заставляет текст казаться, будто он пульсирует неоновым светом. Начинается это с простого HTML-якоря, стилизованного для преобразования вида в захватывающий неоновый эффект. Магия происходит в части CSS, где используются @keyframes для анимации свечения текста. Эта анимация создает динамичный визуальный эффект, чередуя интенсивность и разброс тени текста, имитируя мерцание неоновой вывески.

Код CSS использует text-shadow в сочетании с keyframes под названием neon для достижения этого эффекта. Он определяет ряд эффектов тени, которые меняются по размеру и интенсивности, плавно переходя от более размытого и интенсивного свечения к более тонкому. Это делается с использованием свойств from и to внутри keyframes, которые определяют начальное и конечное состояния анимации соответственно.

Более того, использование префиксов -webkit-, -moz- и -o- перед animation и @keyframes обеспечивает кроссбраузерную совместимость, позволяя этому красивому эффекту текста с неоновым свечением работать в различных веб-браузерах. Такое внимание к деталям гарантирует, что анимация текста может быть доступна широкой аудитории, независимо от выбора браузера. Добавление пользовательского шрифта от Google Fonts дополнительно усиливает визуальное привлекательность, делая неоновый эффект текста еще более выразительным и стильным.