glowing text as loading page image

How to Create a Glowing Text as Loading Page with CSS Code?

Post Author:Mofreh
Post published:November 7, 2019
Post Category:Loading Animation / Web Design
Post Comments:0 Comments

Glowing Text as Loading Page: In this lesson we will learn how to change the text glowing feature with style css and adding a little animation to it. This animation will help to generate a stunning loading page. You could download the code from this safhatech website at this lesson post.

The code is generated with pure css.

This lesson is a part of an animated loading page course. These lessons is supported with: SAFHATECH.COM.

You could see the other videos and lessons by going to safhatech.com and going to categories. From the navigation bar and then loading at design.

The order of this lesson is like this:

Creating empty HTML file then add HTML code.
Creating empty style-sheet file and then adding CSS style.

Lesson 21

This Video explain the same topic:

https://youtu.be/u_0kP3S5tbU

Creating empty HTML file then add HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="center">
    <div class="load">
        <span>D</span>
        <span>e</span>
        <span>s</span>
        <span>i</span>
        <span>g</span>
        <span>n</span>
        <span>.</span>
        <span>.</span>
    </div>
</div>
</body>
</html>

Creating empty style-sheet file and then adding CSS style:

body{
    padding: 0;
    margin: 0;
    background-color:#0a4544;
}
.center{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.load span{
    position: relative;
    color: white;
    font-family: Tahoma;
    font-weight: bolder;
    letter-spacing: 12px;
    font-size: 40px;
    animation: anim 3s linear infinite;
}
@keyframes anim {
    0%{
        filter: blur(0);
    }
 40%{
        filter: blur(18px);
    }
 80%{
        filter: blur(0);
    }
 100%{
        filter: blur(0);
    }
}
.load span:nth-child(1){
    animation-delay: 0s;
}
.load span:nth-child(2){
    animation-delay: 0.3s;
}
.load span:nth-child(3){
    animation-delay: 0.6s;
}
.load span:nth-child(4){
    animation-delay: 0.9s;
}
.load span:nth-child(5){
    animation-delay: 1.2s;
}
.load span:nth-child(6){
    animation-delay: 1.5s;
}
.load span:nth-child(7){
    animation-delay: 1.8s;
}
.load span:nth-child(8){
    animation-delay: 2.1s;
}

Download Code

Consequently You could follow us at :

Website URL: https://www.safhatech.com/

YouTube: https://www.youtube.com/channel/UCIVzh6iykNowNcOUT5Gfasw

Twitter: http:// https://twitter.com/safhatech

Instagram: https://www.instagram.com/safhatech

Facebook: http:// https://www.facebook.com/Safhatech-487171875443687

Phone: 967778283416