純css製作loading動畫

冰影浴火發表於2018-04-02
CSS動畫

通常loading動畫都是使用圖片，其實簡單的loading動畫用css就可以完全做到。

先上程式碼

html

<div class="loading">
  <div class="left"></div>
  <div class="right"></div>
</div>
複製程式碼

css

.loading {
  width: 100px;
  height: 100px;
  position: fixed;
  display: flex;
  border-radius: 50%;
  overflow: hidden;
  -webkit-mask: radial-gradient(transparent 55%, #000 55%);
  animation: rotate 1s linear infinite;
}
.left {
  width: 50%;
  height: 100%;
  background: linear-gradient(rgb(2, 211, 248), rgba(2, 211, 248, .5))
}
.right {
  width: 50%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(2, 211, 248, .5));
}
@keyframes rotate {
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
複製程式碼

最終效果

loading
這裡使用的mask屬性瀏覽器支援較差，只有webkit核心的瀏覽器和firefox支援，不過移動端是完全沒有問題的。

原理也很簡單，就是利用css3漸變和mask遮罩,來製作這個效果。

css3漸變可以看這裡

mask可以看這裡

首先使用線性漸變linear-gradient,左邊半塊從上到下，透明度1漸變到0.5，右邊半塊從上到下，透明度0漸變到0.5，大致是下面這個樣子

9zVQij.png
然後在父元素把它切割成圓形，並使用mask遮罩遮蓋住中間的位置，使其成為圓環形，也許你認為不用mask而使用一個塊元素遮住中間也行，但是塊元素是不透明的，同時也遮住了背景，而mask卻可以使元素透明。

利用這個原理，我們可以製作更多有趣的loading動畫。

稍微改變一下，就會有各種效果

// .left
background: linear-gradient(rgb(255, 255, 255), rgb(0, 0, 0));
// .right
background: linear-gradient(rgb(255, 255, 255), rgb(0, 0, 0));
複製程式碼

9zVXkQ.png

// .left
background: linear-gradient(rgb(255, 0, 0), rgb(0, 255, 0) 33%, rgb(0, 255, 255) 66%, rgb(0, 0, 255) 100%);
// .right
background: linear-gradient(rgb(255, 0, 0), rgb(255, 0, 255) 50%, rgb(0, 0, 255), 100%);
複製程式碼

9zecIe.png

更多有趣的效果，需要自己去探索。

相關文章