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 9divtags.

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

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

3. Container title text style, usealign-itemsattribute to center align.

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

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

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

5. class*='header-'title text style, use thepositionattribute 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, useanimation(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@keyframesrules 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 theanimation-delayattribute to header0-8 title text style and wait for 1 second before starting the animation. Thebackgroundattribute 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

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!