CSS3的loading製作，讓頁面載入時不再單調

阿新 • • 發佈：2022-05-04

頁面的loading效果一直都是個比較重要的製作，往往一個好的載入效果可以有效的提升使用者體驗。而實際開發中，loading效果具體該如何製作？前端工程師又會有哪些特殊的技能呢？

本文主要內容

1、效果展示

2、主要涉及到的知識點

3、基本實現思路

4、案例實現

5、總結

1、效果展示

CSS3效果的製作不在於那些語句、命令，而是在於如何把語句組合到一起來實現實際效果。換句話說，CSS3效果只有想不到的，但是沒有做不到的。下圖就是一個開發中常用到的loading效果展示。

2、主要涉及到的知識點

此效果的實現並不是很難，只需要藉助之前CSS3文章系列中講解過的圓角、變形、動畫，在配合上相應的位置定位即可實現，具體我們來分析下需要用到的知識點。

1）CSS3圓角

主要功能是為標籤新增圓角樣式，有如下的屬性：

border-radius ： none | percent；

none代表的是不設定圓角，percent表示可以使用百分數實現圓角的設定，如下：

border-radius: 50%;

2）CSS3變形

CSS3的變形主要是transform提供的幾種方式，包含旋轉、平移、扭曲、縮放等等。在本例中主要使用到的是旋轉，用於實現圓環的變化效果。

其主要使用方式如下：

transform: rotate(30deg);

通過指定的角度引數對元素指定一個旋轉，其中angle是指旋轉角度，如果設定的值為正數表示順時針旋轉，如果設定的值為負數，則表示逆時針旋轉。

3）CSS3動畫

藉助CSS3的animation來實現圓環的轉動效果，配合關鍵幀keyframe，讓圓環在不同的旋轉時期發生不一樣的變化。其主要使用方式如下：

animation: fadeOut 1s linear 0.2s infinite;

上述程式碼中，屬性從左往右依次代表的是：動畫的名稱（由keyframe定義）、動畫的時間、動畫的速度曲線、動畫的延遲時間、動畫的播放次數（infinite表示無限迴圈）。

3、基本實現思路

利用兩個div來實現左右各半的位置大小製作，然後藉助圓角邊框實現圓環樣式的控制，讓原來是方形的塊變成圓形；之後控制不同方向上的邊框顏色，調整最佳的視覺效果；最後利用CSS3的動畫，實現圓環的轉動，以及顏色的變化效果。

4、案例實現

基本的HTML結構如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>H5course</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <style type="text/css">


    </style>
</head>
<body>
<div class="progress">
    <div class="wrapper right">
        <div class="circleProgress rightcircle"></div>
    </div>
    <div class="wrapper left">
        <div class="circleProgress leftcircle"></div>
    </div>
    <div class="loading">
        loading
        <em>.</em>
        <em>.</em>
        <em>.</em>
    </div>
</div>
</body>
</html>

相應的樣式書寫如下：

.progress {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 150px auto;
    line-height: 200px;
    text-align: center;
    font-size: 25px;
}
.wrapper {
    position: absolute;
    top: 0;
    overflow: hidden;
    width: 100px;
    height: 200px;
}
.right {
    right: 0;
}
.left {
    left: 0;
}
.circleProgress {
    position: absolute;
    top: 0;
    width: 160px;
    height: 160px;
    border: 20px solid rgb(232, 232, 12);
    border-radius: 50%;
    transform: rotate(45deg);
}
.rightcircle {
    right: 0;
    border-top: 20px solid green;
    border-right: 20px solid green;
    animation: right 5s linear infinite;
}
.leftcircle {
    left: 0;
    border-bottom: 20px solid green;
    border-left: 20px solid green;
    animation: left 5s linear infinite;
}
@keyframes right {   
    0% {
        border-top: 20px solid #ed1a1a;
        border-right: 20px solid #ed1a1a;
        -webkit-transform: rotate(45deg);
    }
    50% {
        border-top: 20px solid rgb(232, 232, 12);
        border-right: 20px solid rgb(232, 232, 12);
        border-left: 20px solid rgb(81, 197, 81);
        border-bottom: 20px solid rgb(81, 197, 81);
        transform: rotate(225deg);
    }
    100% {
        border-left: 20px solid green;
        transform: rotate(225deg);
    }
}
@keyframes left {
    0% {
        border-bottom: 20px solid #ed1a1a;
        border-left: 20px solid #ed1a1a;
        transform: rotate(45deg);
    }
    50% {
        border-top: 20px solid rgb(81, 197, 81);
        border-right: 20px solid rgb(81, 197, 81);
        border-bottom: 20px solid rgb(232, 232, 12);
        border-left: 20px solid rgb(232, 232, 12);
        transform: rotate(45deg);
    }
    100% {   
        border-top: 20px solid green;
        border-right: 20px solid green;
        border-bottom: 20px solid green;
        border-left: 20px solid green;
        transform: rotate(225deg);
    }
}
.loading em:nth-child(1) { 
    animation: fadeOut 1s linear 0.2s infinite; 
}
.loading em:nth-child(2) {
    animation: fadeOut 1s linear 0.6s infinite; 
}
.loading em:nth-child(3) {
    animation: fadeOut 1s linear 1s infinite;
}
@keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

如上，CSS3效果就已經搞定了~很簡單的解決了loading的效果，同時適合在移動端中應用。

顯示的效果：