CSS3不同樣式的loading效果

效果如下：

各種炫酷動畫可參考網站：https://www.html5tricks.com/tag/loading動畫/

html代碼

<div class="loader">加載中...</div>

這裏爲了減少代碼量，並沒有做兼容性處理，一般我們需要在上述代碼animation、animation-delay、keyframes前加入-webkit-在寫一次樣式。

上面代碼中寬高等都是用的em作爲單位，這個的好處在於可以用font-size來控制其大小。

1.第一個動畫的實現

<style>

body {
    background: #56b4ab;
}

.loader,
.loader:before,
.loader:after {
    background: #FFF;
    /*
    * load1：執行的動畫名
    * 1s：執行一秒
    * infinite：執行無限次
    * ease-in-out：動畫以低速開始和結束
    */
    animation: load1 1s infinite ease-in-out;
    width: 1em;
    height: 4em;
}

.loader:before,
.loader:after {
    position: absolute;
    top: 0;
    content: '';
}

.loader:before {
    left: -1.5em;
}

.loader {
    text-indent: -9999em;
    margin: 40% auto;
    position: relative;
    font-size: 11px;
    /* 延時0.16s */
    animation-delay: 0.16s;
}

.loader:after {
    left: 1.5em;
    /* 延時0.32s */
    animation-delay: 0.32s;
}

@keyframes load1 {
    0%,
    80%,
    100% {
        box-shadow: 0 0 #FFF;
        height: 4em;
    }
    40% {
        /* 實現上部拉伸 */
        box-shadow: 0 -2em #ffffff;
        /* 實現下部拉伸 */
        height: 5em;
    }
}

</style>
 

2.第二個動畫的實現

body {
    background: #56b4ab;
}

.loader,
.loader:before,
.loader:after {
    border-radius: 50%;
}

.loader:before,
.loader:after {
    position: absolute;
    top: -0.1em;
    content: '';
    width: 5.2em;
    height: 10.2em;
    background: #56b4ab;
}

.loader {
    font-size: 11px;
    text-indent: -99999em;
    margin: 30% auto;
    position: relative;
    width: 10em;
    height: 10em;
    box-shadow: inset 0 0 0 1em #FFF;
}

.loader:before {
    border-radius: 10.2em 0 0 10.2em;
    left: -0.1em;
    /* 設置旋轉元素的基點位置 */
    transform-origin: 5.2em 5.1em;
    /*
      * load2：執行的動畫名
      * 2s：執行2秒
      * infinite：執行無限次 
      * 1.5s：延時1.5秒
      */
    animation: load2 2s infinite 1.5s;
}

.loader:after {
    border-radius: 0 10.2em 10.2em 0;
    left: 5.1em;
    transform-origin: 0px 5.1em;
    animation: load2 2s infinite;
}

@keyframes load2 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

這個動畫主要利用了旋轉和顏色遮擋來實現動畫效果。

3.第三個動畫的實現

body{
    background: #56b4ab;
}
.loader {
    font-size: 10px;
    margin: 30% auto;
    text-indent: -9999em;
    width: 11em;
    height: 11em;
    border-radius: 50%;
    /* 線性漸變，從左到右，從白色到透明，0％代表起點和100％是終點 */
    background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
    position: relative;
    animation: load3 1.4s infinite linear;
}
.loader:before,
.loader:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
}
.loader:before {
    width: 50%;
    height: 50%;
    background: #FFF;
    border-radius: 100% 0 0 0;
}
.loader:after {
    background: #56b4ab;
    width: 75%;
    height: 75%;
    border-radius: 50%;
    margin: auto;
    bottom: 0;
    right: 0;
}
@keyframes load3 {
  0% {
        transform: rotate(0deg);
    }
  100% {
         transform: rotate(360deg);
     }
}

實現：線性漸變+顏色遮擋+旋轉

4.第四個動畫的實現

body{
    background: #56b4ab;
}
.loader {
    font-size: 20px;
    margin: 45% auto;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: relative;
    text-indent: -9999em;
    /* liner：規定以相同速度開始至結束的過渡效果*/
    animation: load4 1.3s infinite linear;
}
@keyframes load4 {
  0%,
  100% {
        box-shadow: 
        0em -3em 0em 0.2em #ffffff, 
        2em -2em 0 0em #ffffff, 
        3em 0em 0 -0.5em #ffffff, 
        2em 2em 0 -0.5em #ffffff, 
        0em 3em 0 -0.5em #ffffff, 
        -2em 2em 0 -0.5em #ffffff, 
        -3em 0em 0 -0.5em #ffffff, 
        -2em -2em 0 0em #ffffff;
    }
  12.5% {
          box-shadow: 
            0em -3em 0em 0em #ffffff, 
            2em -2em 0 0.2em #ffffff, 
            3em 0em 0 0em #ffffff, 
            2em 2em 0 -0.5em #ffffff, 
            0em 3em 0 -0.5em #ffffff, 
            -2em 2em 0 -0.5em #ffffff, 
            -3em 0em 0 -0.5em #ffffff, 
            -2em -2em 0 -0.5em #ffffff;
          }
  25% {
        box-shadow: 
            0em -3em 0em -0.5em #ffffff, 
            2em -2em 0 0em #ffffff, 
            3em 0em 0 0.2em #ffffff, 
            2em 2em 0 0em #ffffff, 
            0em 3em 0 -0.5em #ffffff, 
            -2em 2em 0 -0.5em #ffffff, 
            -3em 0em 0 -0.5em #ffffff, 
            -2em -2em 0 -0.5em #ffffff;
         }
  37.5% {
          box-shadow: 
            0em -3em 0em -0.5em #ffffff, 
            2em -2em 0 -0.5em #ffffff, 
            3em 0em 0 0em #ffffff, 
            2em 2em 0 0.2em #ffffff, 
            0em 3em 0 0em #ffffff, 
            -2em 2em 0 -0.5em #ffffff, 
            -3em 0em 0 -0.5em #ffffff, 
            -2em -2em 0 -0.5em #ffffff;
           }
  50% {
        box-shadow: 
            0em -3em 0em -0.5em #ffffff, 
            2em -2em 0 -0.5em #ffffff, 
            3em 0em 0 -0.5em #ffffff, 
            2em 2em 0 0em #ffffff, 
            0em 3em 0 0.2em #ffffff, 
            -2em 2em 0 0em #ffffff, 
            -3em 0em 0 -0.5em #ffffff, 
            -2em -2em 0 -0.5em #ffffff;
         }
  62.5% {
          box-shadow: 
            0em -3em 0em -0.5em #ffffff, 
            2em -2em 0 -0.5em #ffffff, 
            3em 0em 0 -0.5em #ffffff, 
            2em 2em 0 -0.5em #ffffff, 
            0em 3em 0 0em #ffffff, 
            -2em 2em 0 0.2em #ffffff, 
            -3em 0em 0 0em #ffffff, 
            -2em -2em 0 -0.5em #ffffff;
           }
  75% {
            box-shadow: 
            0em -3em 0em -0.5em #ffffff, 
            2em -2em 0 -0.5em #ffffff, 
            3em 0em 0 -0.5em #ffffff, 
            2em 2em 0 -0.5em #ffffff, 
            0em 3em 0 -0.5em #ffffff, 
            -2em 2em 0 0em #ffffff, 
            -3em 0em 0 0.2em #ffffff, 
            -2em -2em 0 0em #ffffff;
        }
  87.5% {
          box-shadow: 
            0em -3em 0em 0em #ffffff, 
            2em -2em 0 -0.5em #ffffff, 
            3em 0em 0 -0.5em #ffffff, 
            2em 2em 0 -0.5em #ffffff, 
            0em 3em 0 -0.5em #ffffff, 
            -2em 2em 0 0em #ffffff, 
            -3em 0em 0 0em #ffffff, 
            -2em -2em 0 0.2em #ffffff;
          }
}

---

想要整理更多的碎片知識，掃碼關注下面的公衆號，讓我們在哪裏接着嘮！