Анимированный неоновый текст на CSS

Анимированный неоновый текст на CSS

Анимированный неоновый текст на CSS

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

Создание и стилизация текста


<div class="box">
    ...
    <h2>Neon Text</h2>
</div>

@import url('https://fonts.googleapis.com/css2?family=Monseratt:wght@600;700&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Monseratt', sans-serif;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #000;
    overflow: hidden;
}
.box{
    position: relative;/*относительное позиционирование*/
    width: 600px;/*ширина контейнера для текста*/
    height: 300px;/*высота контейнера*/
    display: flex;/*отображать как гибкий контейнер*/
    justify-content: center;/*в центре по горизонтали*/
    align-items: center;/*в центре по вертикали*/
}
.box h2{
    color: #fff;/*цвет текста*/
    font-size: 5em;/*размер шрифта*/
    font-weight: 600;/*толщина шрифта*/
    letter-spacing: 0.1em;/*межбуквенное пространство*/
    text-shadow: 0 0 10px #00b3ff,/*неоновый эффект*/
        0 0 20px #00b3ff,
        0 0 40px #00b3ff,
        0 0 80px #00b3ff,
        0 0 120px #00b3ff;
}

Анимированный неоновый текст на CSS

Создание и стилизация неонового курсора


<div class="box">
    <div class="lightbar"></div>
    ...
    <h2>Neon Text</h2>
</div>

.lightbar{
    position: absolute;/*абсолютное позиционирование */
    top: 0;
    left: 0;
    width: 10px;/*ширина курсора*/
    height: 100%;/*высота курсора*/
    border-radius: 10px;/*закругления*/
    background: #fff;/*цвет курсора*/
    z-index: 2;/*порядок слоя*/
    box-shadow: 0 0 10px #00b3ff,/*неоновый эффект*/
        0 0 20px #00b3ff,
        0 0 40px #00b3ff,
        0 0 80px #00b3ff,
        0 0 120px #00b3ff;
    animation: animatelightbar 5s linear infinite;/*свойства анимации*/
}

Анимированный неоновый текст на CSS

Анимирование курсора

Курсор плавно появляется и двигается туда-сюда по тексту. Это еще не то, что нам нужно.


@keyframes animatelightbar{
    0%,5%
    {
        transform: scaleY(0) translateX(0);
    }
    10%
    {
        transform: scaleY(1) translateX(0);
    }
    90%
    {
        transform: scaleY(1) translateX(calc(600px - 10px));
    }
    95%,100%
    {
        transform: scaleY(0) translateX(calc(600px - 10px));
    }
}

Анимированный неоновый текст на CSS

Создание верхнего слоя

Теперь верхний слой сверху поверхности текста и курсор двигается по нему.


<div class="box">
    <div class="lightbar"></div>
    <div class="topLayer"></div>
    <h2>Neon Text</h2>
</div>

.topLayer{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    animation: animatetopLayer 10s linear infinite;
}

Анимированный неоновый текст на CSS

Анимация верхнего слоя

Создадим анимацию, чтобы курсор двигался вместе с верхним слоем, создавая магический эффект — появления и стирания текста.


@keyframes animatetopLayer{
    0%,2.5%
    {
        transform: translateX(0);
    }
    5%
    {
        transform: translateX(0);
    }
    45%
    {
        transform: translateX(100%);
    }
    47.5%,50%
    {
        transform: translateX(100%);
    }
    50.001%,52.5%
    {
        transform: translateX(-100%);
    }
    55%
    {
        transform: translateX(-100%);
    }
    95%
    {
        transform: translateX(0%);
    }
    97.5%,100%
    {
        transform: translateX(0%);
    }
}

Анимированный неоновый текст на CSS

Посмотрите пример на CodePen

Источник

Читайте также

НЕТ КОММЕНТАРИЕВ

Оставить комментарий