You are currently viewing How to Create Multi Animated Text as Loading Page in CSS Code?
animated loading text image

How to Create Multi Animated Text as Loading Page in CSS Code?

Multi Animated Text: In this lesson we will learn how to create animated loading text. The code is only pure CSS code. Also You could download the text from the bottom of this post.

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 and adding HTML code.
  • Creating empty style-sheet file and then adding CSS style.

Lesson 13

This Video explain the same topic “Multi Animated Text”:

https://youtu.be/BqXv9647oOU

Creating empty HTML file and then adding 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>
<ul>
    <li>WEB</li>
    <li>DESIGN</li>
    <li>SAFHATECH.com</li>
</ul>
</body>
</html>

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

body{
    padding: 0;
    margin: 0;
    background-color:#0b3054 ;
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);

}
ul li{
    text-align: center;
    font-family: Tahoma;
    list-style: none;
    color: #c55607;
    font-size: 3em;
    letter-spacing: 10px;
    animation: animate 1.5s linear infinite;
}
@keyframes animate {
    0%{
        color: #0b3054;
        text-shadow: none;
    }100%{
        color: #00d0cc;
        text-shadow: 0 0 7px #ffbd16, 0 0 50px #16c0ff;
    }
}
ul li:nth-child(1){
    animation-delay: 0.4s;
}
ul li:nth-child(2){
    animation-delay: 0.8s;
}
ul li:nth-child(3){
    animation-delay: 1.2s;
}

Download the code from here:



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

Leave a Reply