Неоновый текст на CSS с эффектом мерцания

28.06.2021

pic1

Один из тех случаев, в которых лучше один раз увидеть, чем много раз услышать.

По сути это неоновая ободка текста (text-shadow) и эффект мерцания через @keyframes

ободка текста:

 
.neonText {
    color: #fff;

    text-shadow:
            0 0 7px #fff,
            0 0 10px #fff,
            0 0 21px #fff,
            0 0 42px #5271ff,
            0 0 82px #5271ff,
            0 0 92px #5271ff,
            0 0 102px #5271ff,
            0 0 151px #5271ff;
}

Мерцание:

 
@keyframes pulsate2 {

    100% {

        text-shadow: 0 0 4px #fff,
        0 0 11px #fff,
        0 0 19px #fff,
        0 0 40px #0fa,
        0 0 80px #0fa,
        0 0 90px #0fa,
        0 0 100px #0fa,
        0 0 150px #0fa;

    }

    0% {

        text-shadow: 0 0 2px #fff,
        0 0 4px #fff,
        0 0 6px #fff,
        0 0 10px #0fa,
        0 0 45px #0fa,
        0 0 55px #0fa,
        0 0 70px #0fa,
        0 0 80px #0fa;

    }
}

Картинка стены в psd


Категории: Web, CSS
Пометки: css Neon Glowing Text
Яндекс.Метрика