Elementary article: How to use CSS3 to create love loading (detailed code explanation)

In the previous article "Teach you step by step how to use CSS to create a realistic water ripple effect (with code)", I introduced you how to use CSS to create a realistic water ripple effect. The following article will introduce to you how to use CSS3 to create love loading. Let’s see how to do it together.

There are often such CSS3 love loads in web pages. Let me share with you the renderings. After viewing the effects, let’s study how to achieve it. For everyone Used to explain the basic process of html css image text layout.

The effect looks like this

1. First, create a new HTML file and define 9 div tags.

<div class="header-0"></div>
            <div class="header-1"></div>
            <div class="header-2"></div>
            <div class="header-3"></div>
            <div class="header-4"></div>
            <div class="header-5"></div>
            <div class="header-6"></div>
            <div class="header-7"></div>
            <div class="header-8"></div>

2. Start defining the css style to modify and add the background-color attribute to set the background color, set the width to 100%, set the height to 100%, margin Property sets all margin properties.

body {
        width: 100%;
        height: 100%;
        margin: 0;
        background-color: #ccc;
    }

3. Container title text style, use align-items attribute to center align.

  .container {
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;

4. Header title text style, use the position attribute to specify the positioning of an element.

.header {
        position: relative;
        width: 138px;
        /* display: flex; */

5. class*='header-'title text style, use the position attribute to position the element, the syntax is "position: absolute;top: -5px;border-radius: 5px" generates an absolutely positioned element.

 [class*='header-']{
        position: absolute;
        width: 10px;
        height: 10px;
        top: -5px;
        border-radius: 5px;
     }

6. Header0-8 title text style, use animation (animation) attribute to bind to every 8 elements to make the elements swing.

 .header-0,
    .header-8 {
        animation: header-0 3.2s infinite;
    }
    .header-1,
    .header-7 {
        animation: header-1 3.2s infinite;
    }
    .header-2,
    .header-6 {
        animation: header-2 3.2s infinite;
    }
    .header-3,
    .header-5 {
        animation: header-3 3.2s infinite;
    }
    .header-4 {
        animation: header-4 3.2s infinite;
    }

7. Use 4 @keyframes rules to gradually change the 4 created animations from 0% to 100% for the opening animation.

@keyframes header-0 {
    0%,
    10%,
    90%,
    100% {
        height: 10px;
        top: -5px;
    }
    45%,
    55% {
        height: 30px;
        top: -10px;
    }
}
@keyframes header-1 {
    0%,
    10%,
    90%,
    100% {
        height: 10px;
        top: -5px;
    }
    45%,
    55% {
        height: 60px;
        top: -31px;
    }
}
@keyframes header-2 {
    0%,
    10%,
    90%,
    100% {
        height: 10px;
        top: -5px;
    }
    45%,
    55% {
        height: 80px;
        top: -37px;
    }
}
@keyframes header-3 {
    0%,
    10%,
    90%,
    100% {
        height: 10px;
        top: -5px;
    }
    45%,
    55% {
        height: 90px;
        top: -31px;
    }
}
@keyframes header-4 {
    0%,
    10%,
    90%,
    100% {
        height: 10px;
        top: -5px;
    }
    45%,
    55% {
        height: 94px;
        top: -23px;
    }

8. Add the animation-delay attribute to header0-8 title text style and wait for 1 second before starting the animation. The background attribute sets the color and binds 8 elements.

.header-0 {
    left: 0;
    animation-delay: 0s;
    background: #92fe9d;

}
.header-1 {
    left: 16px;
    animation-delay: 0.15s;
    background: #00c9ff;
}
.header-2 {
    left: 32px;
    animation-delay: 0.3s;
    background: #ff758c;
}
.header-3 {
    left: 48px;
    animation-delay: 0.45s;
    background: #ff7eb3;
}
.header-4 {
    left: 66px;
    animation-delay: 0.6s;
    background: #fa71cd;
}
.header-5 {
    left: 82px;
    animation-delay: 0.75s;
    background: #6f86d6;
}
.header-6 {
    left: 98px;
    animation-delay: 0.9s;
    background: #f9f586;
}

.header-7 {
    left: 114px;
    animation-delay: 1.05s;
    background: #b1f4cf;
}
.header-8 {
    left: 130px;
    animation-delay: 1.2s;
    background: #fef9d7;
}

The code effect is out

The complete code below

    
    
    


    

        

            <div class="header-0"></div>
            <div class="header-1"></div>
            <div class="header-2"></div>
            <div class="header-3"></div>
            <div class="header-4"></div>
            <div class="header-5"></div>
            <div class="header-6"></div>
            <div class="header-7"></div>
            <div class="header-8"></div>
        
    

Recommended learning: CSS video tutorial

The above is the detailed content of Elementary article: How to use CSS3 to create love loading (detailed code explanation). For more information, please follow other related articles on the PHP Chinese website!