初級篇：如何用CSS3製作愛心載入（程式碼詳解）

之前的文章《手把手教你使用CSS製作逼真的水波紋效果（附代碼）》中，為大家介紹了怎麼使用CSS製作逼真的水波紋效果。以下這篇文章跟大家介紹如何用CSS3製作愛心加載，我們一起看看怎麼做。

網頁中常常有這樣的CSS3愛心加載，給大家分享一下看效果圖看完效果，我們來研究一下是怎麼實現呢，給大家用於講解html css圖片文字排版的基本流程。

效果大概長這樣

1、首先html建立新文件，定義9​​個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屬性設定顏色綁定8個元素。

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

程式碼效果出來了

下面完整程式碼

    
    
    


    

        

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

推薦學習：CSS影片教學

以上是初級篇：如何用CSS3製作愛心載入（程式碼詳解）的詳細內容。更多資訊請關注PHP中文網其他相關文章！