CSS3載入等待動畫效果

antzone發表於2018-07-23
CSSS3動畫

分享一段程式碼例項，它實現了動態載入等待效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div.animate {
  width:500px;
  height:300px;
  margin:10px;
  border:2px solid #000;
  background-color:#fff;
  position:relative;
}
div.animate > div.animate-row {
  width:400px;
  height:100px;
  margin:0px 50px 0px 50px;
  position:absolute;
  top:100px;
  left:0;
}
div.animate > div.animate-row > div.behaviour {
  width: 50px;
  height: 100%;
  margin: 0 25px 0 25px;
  float: left;
  background-color: #000;
  animation: Change 2s infinite ease-out;
  position: relative;
  background-color: #ccc;
}
div.animate > div.animate-row > div.beha2 {
  animation-delay: 0.25s;
}
div.animate > div.animate-row > div.beha3 {
  animation-delay: 0.50s;
}
div.animate > div.animate-row > div.beha4 {
  animation-delay: 0.75s;
}
@keyframes Change {
  from {
    height: 100%;
    top: 0;
    background-color:#ccc;
  }
  50% {
    height: 200%;
    top: -50%;
    background-color:#000;
  }
  to {
    height: 100%;
    top: 0;
    background-color:#ccc;
  }
}
</style>
</head>
<body>
<div class="animate">
  <div class="animate-row">
    <div class="behaviour beha1"></div>
    <div class="behaviour beha2"></div>
    <div class="behaviour beha3"></div>
    <div class="behaviour beha4"></div>
  </div>
</div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

[CSS] 純文字檢視 複製程式碼
div.animate {
  width:500px;
  height:300px;
  margin:10px;
  border:2px solid #000;
  background-color:#fff;
  position:relative;
}

設定容器元素的相關樣式。

寬度和長度分別為500px和300px。

外邊距為10px，邊框寬度為2px。

設定相對定位可以使其能夠成為定位子元素的定位參考元素。

[CSS] 純文字檢視 複製程式碼
div.animate > div.animate-row {
  width:400px;
  height:100px;
  margin:0px 50px 0px 50px;
  position:absolute;
  top:100px;
  left:0;
}

這是動畫元素的第一級父元素。

並且將其設定在父元素中的垂直水平居中。

[CSS] 純文字檢視 複製程式碼
div.animate > div.animate-row > div.behaviour {
  width: 50px;
  height: 100%;
  margin: 0 25px 0 25px;
  float: left;
  background-color: #000;
  animation: Change 2s infinite ease-out;
  position: relative;
  background-color: #ccc;
}

設定動畫元素的樣式。

寬度是50px，高度是100%（那麼預設就是100px）。

同時設定其為無限迴圈動畫模式。

[CSS] 純文字檢視 複製程式碼
div.animate > div.animate-row > div.beha2 {
  animation-delay: 0.25s;
}
div.animate > div.animate-row > div.beha3 {
  animation-delay: 0.50s;
}
div.animate > div.animate-row > div.beha4 {
  animation-delay: 0.75s;
}

設定元素動畫的延遲時間，這很好理解，因為元素伸縮動畫是依次執行的。

[CSS] 純文字檢視 複製程式碼
@keyframes Change {
  from {
    height: 100%;
    top: 0;
    background-color:#ccc;
  }
  50% {
    height: 200%;
    top: -50%;
    background-color:#000;
  }
  to {
    height: 100%;
    top: 0;
    background-color:#ccc;
  }
}

動畫分兩個過程，首先是伸長，然後是收縮。

上面的程式碼恰好就實現了此功效。

高度變為200%，top值變為-50%是為了保持元素垂直居中。

二.相關閱讀:

（1）.animation可以參閱CSS3 animation一章節。

（2）.animation-delay可以參閱CSS3 animation-delay一章節。

（3）.@keyframes可以參閱CSS3 @keyframes一章節。

相關文章