CSS3 Glowing text effect animation | css text effects | simple text animation css

Divinector July 22, 2019 2

CSS3 Glowing text effect animation | css text effects | simple text animation css

Add this font

HTML

<h2 class="text-area">
divinector</h2>

CSS

body{
            background: #0A0A0A;
        }
        
        .text-area {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            margin: 0;
            font-family: 'Concert One', cursive;
            font-weight: 900;
            font-size: 10em;
            animation-name: animate;
            animation-duration: 10s;
            animation-direction: alternate;
            animation-iteration-count: infinite;            
            padding:40px;
            line-height:1.5;
            text-transform:uppercase;
         }
        @keyframes animate {
            0%,100%{ text-shadow:0 0 30px red; }
            25%{ text-shadow:0 0 30px orange; }
            50%{ text-shadow:0 0 30px forestgreen; }
            75%{ text-shadow:0 0 30px cyan; }
         }