css3特效_CSS3彈跳Loading加載動畫特效的實現

今天給大家分享一款非常常用的css 加載動畫，這款css3 Loading動畫主要由幾個小球通過規律的上下跳動，漸隱漸顯而成，效果十分生動、流暢。兼容IE8以上，尤其適合在移動端中使用，基本代替了圖片實現加載的效果。

 

反彈加載動畫效果如下：

 

代碼的實現：

<div class="bouncing-loader">
  <div></div>
  <div></div>
  <div></div>
</div>
<style>
	@keyframes bouncing-loader {
	  from {
	    opacity: 1;
	    transform: translateY(0);
	  }
	  to {
	    opacity: 0.1;
	    transform: translateY(-1rem);
	  }
	}
	.bouncing-loader {
	  display: flex;
	  justify-content: center;
	}
	.bouncing-loader > div {
	  width: 1rem;
	  height: 1rem;
	  margin: 3rem 0.2rem;
	  background: #8385aa;
	  border-radius: 50%;
	  animation: bouncing-loader 0.6s infinite alternate;
	}
	.bouncing-loader > div:nth-child(2) {
	  animation-delay: 0.2s;
	}
	.bouncing-loader > div:nth-child(3) {
	  animation-delay: 0.4s;
	}
</style>

　　

字由https://www.wode007.com/sites/73248.html 中國字體設計網https://www.wode007.com/sites/73245.html

說明：

注:1rem 通常是16px 。 
@keyframes定義了一個具有兩種狀態的動畫，其中元素更改opacity並使用transform: translateY()在2D平面上進行transform: translateY() 。
.bouncing-loader是彈跳圓圈的父容器，使用display: flex和justify-content: center將它們放置在中心位置。  
.bouncing-loader > div ，將父級的三個子div作為樣式。 div的寬度和高度為1rem ，使用border-radius: 50%將它們從正方形變成圓形。 
margin: 3rem 0.2rem 指定每個圓的上邊距/下邊距為3rem 和左/右邊距0.2rem 以便它們不直接接觸對方，給它們一些呼吸空間。 
animation是各種動畫屬性的縮寫屬性：使用animation-name ， animation-duration ， animation-iteration-count ， animation-direction 。 nth-child(n)目標是其父元素的第n個子元素。 
animation-delay分別用於第二個和第三個div ，以便每個元素不會同時啟動動畫。