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

Демо

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

Код
Редактор

HTML

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

CSS

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

HTML
CSS

Фрагмент кода, в который мы погружаемся, посвящен добавлению броского стиля в веб-дизайн с использованием HTML и CSS, в частности, созданию эффекта неонового свечения для текста, который может добавить классную, ретро атмосферу любой веб-странице. Начинается он с простого HTML-тега-якоря, <a href="#">Неон</a>, который является стандартной гиперссылкой. Но здесь это не просто любая ссылка; это холст для нашего неонового эффекта для текста, предназначенного выделяться ярким, светящимся видом.

Теперь перейдем к магии CSS, которая превращает наш обычный текст в неоновую вывеску. CSS начинается с импорта стильного шрифта из Google Fonts, придавая нашему тексту тот самый подлинный неоновый вид. Настоящее веселье начинается с селектора <a>, где мы задаем основу: текст в верхнем регистре, огромный размер шрифта для большего воздействия и, что крайне важно, свойство анимации, связанное с кадрами-ключами неона. Эта анимация циклично проходит через два состояния, придавая нашему тексту пульсирующий эффект свечения, имитирующий настоящие неоновые вывески.

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

Независимо от того, новичок вы в веб-дизайне или опытный профессионал, добавление такого типа анимированного текстового эффекта может сделать ваши проекты яркими, полными личности и стиля.