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

Демо

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

Код
Редактор

HTML

<div class="logo">
    <b> Т<span>рю</span>к<span></span>и </b>
    <b> д<span>л</span>я<span></span> </b>
    <b> в<span>е</span><span></span>б </b>
    <b> раз<span>ра</span>бот<span>чи</span>ков </b>
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');
.logo {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.logo b {
font: 400 21vh 'Caveat', cursive;
    color: #fee;
    text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em #ff4444, 0 0 0.5em #ff4444, 0 0 0.1em #ff4444, 0 10px 3px #000;
}
.logo b span {
    -webkit-animation: blink linear infinite 2s;
    -moz-animation: blink linear infinite 2s;
    -o-animation: blink linear infinite 2s;
    animation: blink linear infinite 2s;
}
.logo b span:nth-of-type(2) {
    -webkit-animation: blink linear infinite 3s;
    -moz-animation: blink linear infinite 3s;
    -o-animation: blink linear infinite 3s;
    animation: blink linear infinite 3s;
}
@-webkit-keyframes blink {
    78% {
        color: inherit;
        text-shadow: inherit;
    }
    79% {
        color: #333;
    }
    80% {
        text-shadow: none;
    }
    81% {
        color: inherit;
        text-shadow: inherit;
    }
    82% {
        color: #333;
        text-shadow: none;
    }
    83% {
        color: inherit;
        text-shadow: inherit;
    }
    92% {
        color: #333;
        text-shadow: none;
    }
    92.5% {
        color: inherit;
        text-shadow: inherit;
    }
}
@-moz-keyframes blink {
    78% {
        color: inherit;
        text-shadow: inherit;
    }
    79% {
        color: #333;
    }
    80% {
        text-shadow: none;
    }
    81% {
        color: inherit;
        text-shadow: inherit;
    }
    82% {
        color: #333;
        text-shadow: none;
    }
    83% {
        color: inherit;
        text-shadow: inherit;
    }
    92% {
        color: #333;
        text-shadow: none;
    }
    92.5% {
        color: inherit;
        text-shadow: inherit;
    }
}
@-o-keyframes blink {
    78% {
        color: inherit;
        text-shadow: inherit;
    }
    79% {
        color: #333;
    }
    80% {
        text-shadow: none;
    }
    81% {
        color: inherit;
        text-shadow: inherit;
    }
    82% {
        color: #333;
        text-shadow: none;
    }
    83% {
        color: inherit;
        text-shadow: inherit;
    }
    92% {
        color: #333;
        text-shadow: none;
    }
    92.5% {
        color: inherit;
        text-shadow: inherit;
    }
}
@keyframes blink {
    78% {
        color: inherit;
        text-shadow: inherit;
    }
    79% {
        color: #333;
    }
    80% {
        text-shadow: none;
    }
    81% {
        color: inherit;
        text-shadow: inherit;
    }
    82% {
        color: #333;
        text-shadow: none;
    }
    83% {
        color: inherit;
        text-shadow: inherit;
    }
    92% {
        color: #333;
        text-shadow: none;
    }
    92.5% {
        color: inherit;
        text-shadow: inherit;
    }
}

HTML
CSS

Данный код — это творческое сочетание HTML и CSS, созданное для достижения захватывающего визуального эффекта, напоминающего неоновые вывески. Он сосредоточен на свечении и анимации текста, чтобы создать эффект неонового текста.

Начнем с HTML структуры, которая проста, но эффективна. Она использует элемент <div> с классом .logo, внутри которого теги <b> обрамляют текст. Этот текст разбит на части с помощью тегов <span>, чтобы на каждую часть текста можно было наложить индивидуальные анимационные эффекты, имитирующие мерцание и свечение характерные для неоновых вывесок. Этот метод разделения текста не только усиливает визуальную привлекательность, но и обеспечивает детальный контроль над временем анимации и стилем каждой части текста.

Со стороны CSS, волшебство происходит благодаря правилу @keyframes с именем blink, которое отвечает за анимационный эффект. Это правило определяет последовательность изменений стиля со временем, создавая эффект мигания, который имитирует мерцание неоновой вывески. Анимация применяется к элементам в тексте, с различной продолжительностью анимации для создания ступенчатого, более естественного эффекта свечения неона. Кроме того, свойство тени текста широко используется для создания свечения вокруг текста, с несколькими слоями теней разной прозрачности и распространения для имитации диффузного свечения настоящих неоновых ламп. Выбор цветов, интенсивность тени и время анимации критически важны, так как они вместе создают классический неоновый эстетический вид.

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