Learn How to Create a Text Writing Effect in HTML & CSS | Step-by-Step Tutorial

HTML CODE

        
        Text Typing Animation
        


        
                L
                O
                A
                D
                I
                N
                G
            


        .links{
                position: absolute;
                bottom: 20px;
                right: 20px;
        }
        .links a{
                margin-left: 10px;
                color: #fff;
                letter-spacing: 1px;
                font-size: 18px;
                text-decoration: none;
        }
        .links a:hover{
                color: #f3f3f3;
                text-decoration: underline;
        }

CSS CODE

body{
        background: #2b2b2b;
        margin: 0;
        padding: 0;
}
.loader{
        height: 40px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

}
.loader span{
        font-family: arial;
        font-size: 4em;
        color: rgba(255, 255, 255, .1);
        display: inline-block;
        transform: all .5;
        animation: animate 2s infinite;
}
@keyframes animate{
        0%{
                color: rgba(255,255,255,.1);
                transform: translateY(0);
                margin-left: 0;
        }
        25%{
                color: yellow;
                transform: translateY(-15);
                margin-left: 10px;
                text-shadow: 0 15px 5px rgba(0,0,0,1);
        }
        100%{
                color: rgba(255,255,255,.1);
                transform: translateY(0);
        
        }
}
.loader span:nth-child(1){
        animation-delay: .1s
}
.loader span:nth-child(2){
        animation-delay: .2s
}
.loader span:nth-child(3){
        animation-delay: .3s
}
.loader span:nth-child(4){
        animation-delay: .4s
}
.loader span:nth-child(5){
        animation-delay: .5s
}
.loader span:nth-child(6){
        animation-delay: .6s
}
.loader span:nth-child(7){
        animation-delay: .7s
}

Download complete code from GITHub Loading-Text Animation IN PURE CSS

To Watch More Video as Like these

Just Subscribe My Youtube Channel DarkCoders

and Hit The Bell Icon