Elementarer Artikel: So erstellen Sie mit CSS3 Love Loading (detaillierte Code-Erklärung)-CSS-Tutorial-php.cn

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

奋力向前

Freigeben： 2021-09-16 17:58:32

Original

3072 Leute haben es durchsucht

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.

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

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

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

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>

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

rrreee Elementarer Artikel: So erstellen Sie mit CSS3 Love Loading (detaillierte Code-Erklärung) 4. 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!