Elementarer Artikel: So erstellen Sie mit CSS3 Love Loading (detaillierte Code-Erklärung)

Im vorherigen Artikel „Lernen Sie Schritt für Schritt, wie Sie mit CSS einen realistischen Wasserwelleneffekt erstellen (mit Code) “ habe ich Ihnen gezeigt, wie Sie mit CSS einen realistischen Wasserwelleneffekt erstellen. Im folgenden Artikel erfahren Sie, wie Sie mit CSS3 Liebesladungen erstellen. Lassen Sie uns gemeinsam sehen, wie das geht.

Es gibt oft solche CSS3-Liebesladungen auf Webseiten. Nachdem wir uns den Effekt angesehen haben, wollen wir untersuchen, wie man ihn erzielt, und den grundlegenden Prozess des HTML+CSS-Bild- und Textlayouts erklären. .

Der Effekt sieht so aus

1. Erstellen Sie zunächst eine neue HTML-Datei und definieren Sie 9 div-Tags. div标签。

<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、开始定义css样式来进行修饰添加background-color属性设置背景颜色，宽度设置为100%，高度设置为100%，margin属性设置所有外边距属性。

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

3、container标题文本样式，利用align-items属性居中对齐。

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

4、header标题文本样式，利用position属性指定一个元素定位。

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

5、class*='header-'标题文本样式，利用position属性定位元素，语法“position: absolute;top: -5px;border-radius: 5px”生成绝对定位的元素。

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

6、header0-8标题文本样式，利用animation（动画）属性绑定到每8个元素，让元素摆动起来。

 .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、使用4个@keyframes规则，给4个创建动画逐步改变0％是开头动画，100％。

@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、header0-8标题文本样式添加animation-delay属性等待1秒然后开始动画，background

.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;
}

2. Beginnen Sie mit der Definition des CSS-Stils für die Änderung. Fügen Sie das Attribut background-color hinzu, um die Hintergrundfarbe festzulegen, legen Sie die Breite auf 100 % fest und legen Sie das < fest code>margin-Attribut. Alle Randeigenschaften.

    
    
    


    

        

            <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>
        
    

3. Textstil des Containertitels, verwenden Sie das Attribut align-items, um die Ausrichtung zu zentrieren.

rrreee4. Textstil für Kopfzeilen: Verwenden Sie das Attribut position, um die Positionierung eines Elements anzugeben.

rrreee

5. class*='header-'title Textstil, verwenden Sie das Attribut position, um das Element zu positionieren, die Syntax lautet „position: absolute;top: -5px;border- radius: 5px code>“ erzeugt ein absolut positioniertes Element.

rrreee

6. Header0-8 Titeltextstil, verwenden Sie das Attribut animation (Animation), um es an alle 8 Elemente zu binden, damit die Elemente schwingen. rrreee7. Verwenden Sie 4 @keyframes-Regeln, um die 4 erstellten Animationen schrittweise von 0 % auf 100 % für die Eröffnungsanimation zu ändern.

rrreee🎜8. Fügen Sie das Attribut animation-delay zum Titeltextstil header0-8 hinzu und warten Sie 1 Sekunde, bevor Sie die Animation starten bindet 8 Elemente. 🎜rrreee🎜Der Codeeffekt ist da🎜🎜🎜🎜🎜Der vollständige Code unten🎜rrreee🎜Empfohlenes Lernen: 🎜CSS-Video-Tutorial🎜🎜

Das obige ist der detaillierte Inhalt vonElementarer Artikel: So erstellen Sie mit CSS3 Love Loading (detaillierte Code-Erklärung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!