CSS3旋轉載入等待效果

admin發表於2018-09-19
CSSS3

如果網站需要載入的內容較多，瀏覽者開啟頁面可能會出現長時間卡頓或者大量內容暫時無法顯示的現象。

這是非常差的使用者體驗，使用者很可能誤以為頁面出現載入問題，導致潛在使用者的流失。

較為人性化的網站通常暫時顯示一個替代內容，使用者提示瀏覽者，頁面正在載入，並非出現問題。

下面分享一個用CSS3實現的旋轉載入提示效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
body { 
  margin:0; 
  padding:0; 
} 
/* for busy */ 
#busyIcon {  
  position:absolute;  
  width:100%; 
  height:100%; 
  background-color:rgba(0,0,0,0.7); 
} 
.container{ 
  width:100px; 
  height:100px; 
  background-color:black; 
  opacity:0.8; 
  margin-top:-50px; 
  margin-left:-50px; 
  position:absolute; 
  top:50%;
  left:50%; 
  border-radius:10%; 
} 
.top,.base{ 
  height:30%; 
} 
.spinner{ 
  height:40%; 
  width:40%; 
  position:relative; 
  margin:0 auto; 
} 
.spinner div{ 
  width:12%; 
  height:26%; 
  background-color:white; 
  position:absolute; 
  left:44%; 
  top:37%; 
  opacity:0; 
  border-radius:30%; 
  animation:fade 1s linear infinite; 
} 
.spinner div.bar1{
  transform:rotate(0deg) translate(0,-142%); 
  animation-delay:0s;
} 
.spinner div.bar2{
  transform:rotate(30deg) translate(0,-142%); 
  animation-delay:-0.9167s;
} 
.spinner div.bar3{
  transform:rotate(60deg) translate(0,-142%); 
  animation-delay:-0.833s;
} 
.spinner div.bar4{
  transform:rotate(90deg) translate(0,-142%); 
  animation-delay:-0.75s;
}
.spinner div.bar5{
  transform:rotate(120deg) translate(0,-142%); 
  animation-delay:-0.667s;
} 
.spinner div.bar6{
  transform:rotate(150deg) translate(0, -142%); 
  animation-delay: -0.5833s;
} 
.spinner div.bar7 {
  transform:rotate(180deg) translate(0, -142%); 
  animation-delay: -0.5s;
}
.spinner div.bar8 {
  transform:rotate(210deg) translate(0, -142%); 
  animation-delay: -0.41667s;
} 
.spinner div.bar9 {
  transform:rotate(240deg) translate(0, -142%); 
  animation-delay: -0.333s;
} 
.spinner div.bar10 {
  transform:rotate(270deg) translate(0, -142%); 
  animation-delay: -0.25s;
} 
.spinner div.bar11 {
  transform:rotate(300deg) translate(0, -142%); 
  animation-delay: -0.1667s;
} 
.spinner div.bar12 {
  transform:rotate(330deg) translate(0, -142%); 
  animation-delay: -0.0833s;
} 
@-webkit-keyframes fade { 
  from {opacity: 1;} 
  to {opacity: 0.25;} 
} 
/*End busy*/ 
</style> 
</head>
<body>
<div id="busyIcon">
  <div class="container">
    <div class="top"></div>
    <div class="spinner">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
      <div class="bar4"></div>
      <div class="bar5"></div>
      <div class="bar6"></div>
      <div class="bar7"></div>
      <div class="bar8"></div>
      <div class="bar9"></div>
      <div class="bar10"></div>
      <div class="bar11"></div>
      <div class="bar12"></div>
    </div>
    <div class="base"></div>
  </div>
</div>
</body>
</html>

上面的程式碼實現了旋轉載入效果，下面介紹一下它的實現過程。

一.程式碼註釋:

[CSS] 純文字檢視 複製程式碼
body { 
  margin:0; 
  padding:0; 
}

進行簡單的初始化操作，將所有元素的內邊距和外邊距設定為0。

[CSS] 純文字檢視 複製程式碼
#busyIcon { 
  position:absolute; 
  width:100%; 
  height:100%; 
  background-color:rgba(0,0,0,0.7); 
}

設定灰黑色全屏背景。

由於沒有設定它的父元素的尺寸，所以單純的設定width:100%和height:100%不會有全屏效果，新增絕對定位則會實現全屏；最後設定此元素的背景色和透明度。

[CSS] 純文字檢視 複製程式碼
.container{ 
  width:100px; 
  height:100px; 
  background-color:black; 
  opacity:0.8; 
  margin-top:-50px; 
  margin-left:-50px; 
  position:absolute; 
  top:50%;
  left:50%; 
  border-radius:10%; 
}

我們看到的黑色圓角元素。

絕對定位，設定top和left屬性值為50%，然後再設定margin-top和margin-left分別為-50px，又由於元素的尺寸是100px，所以實現了垂直水平居中效果，具體可以參閱CSS div水平垂直居中效果詳解一章節。

[CSS] 純文字檢視 複製程式碼
.top,.base{ 
  height:30%; 
}

這兩個元素位於上下方位，高度為30%，作用後面會有介紹。

[CSS] 純文字檢視 複製程式碼
.spinner{ 
  height:40%; 
  width:40%; 
  position:relative; 
  margin:0 auto; 
}

此元素是旋轉效果的容器。

寬高分別是40%；並將其設定為相對定位，那麼它內部的定位子元素就可以以它為定位參考物件。

通過margin:0 auto將其設定為水平居中；.top和.base的高度為30%，於是實現了垂直居中。

[CSS] 純文字檢視 複製程式碼
.spinner div{ 
  width:12%; 
  height:26%; 
  background-color:white; 
  position:absolute; 
  left:44%; 
  top:37%; 
  opacity:0; 
  border-radius:30%; 
  animation:fade 1s linear infinite; 
}

設定視覺上旋轉div的各個屬性。

絕對定位，由於父元素是相對定位，那麼它定位參考物件就是父元素。

left:44%，top:37%設定div垂直水平居中，具體參閱CSS div水平垂直居中效果詳解一章節。

最後設定動畫在1秒內完成，並且可以往復迴圈。

[CSS] 純文字檢視 複製程式碼
.spinner div.bar1{
  transform:rotate(0deg) translate(0,-142%); 
  animation-delay:0s;
}

此div位於上部中間，沒有旋轉，但是在Y軸移動一定尺寸。

[CSS] 純文字檢視 複製程式碼
.spinner div.bar2{
  transform:rotate(30deg) translate(0,-142%); 
  animation-delay:-0.9167s;
}

有12個div，所以每一個旋轉30deg，就會達成一個完整圓周。

animation-delay:-0.9167s，值是負數（值看起來很複雜，但並不是特別計算得出的，大體差不多即可）。

從第一個div的0到最後一個div的-0.0833，數字的絕對值是逐漸減小的，跨度基本是1秒，所以每旋轉一週的時間大致是1秒鐘；並且由於數字絕對值逐漸減小，於是也就實現了視覺上的旋轉效果，只要對animation-delay屬性值為負數理解，腦補即可很容易理解。

二.相關閱讀:

（1）.絕對定位參閱CSS position:absolute 絕對定位一章節。

（2）.相對定位參閱CSS position:relative 相對定位一章節。

（3）.rgba參閱CSS 顏色表示法一章節。

（4）.border-radius參閱CSS3 border-radius一章節。

（5）.animation參閱CSS3 animation一章節。

（6）.transform參閱CSS3 transform一章節。

（7）.animation-delay參閱CSS3 animation-delay一章節。

（8）.@keyframes參閱CSS3 @keyframes一章節。

相關文章