一、如何實現(xiàn)這個動畫

思路：一個黑色實心圓逐漸變大失乾，同時透明度逐漸降低常熙。然后將第二個相同圓的動畫效果延時1s。

html部分代碼

<div class="wrapper">
        <div class="circle"></div>
        <div class="circle"></div>
</div>

css部分代碼

.wrapper {
    height: 100px;
    width: 100px;
    border: 1px solid red; /*寬高的設(shè)定碱茁，為了方便觀察*/
    position: relative; /*為了將circle定位*/
}

.circle {
    height: 10px;
    width: 10px;
    background-color: black;
    border-radius: 100%;
    /* 將circle絕對定位裸卫，當(dāng)上下左右都設(shè)置為0，
    同時margin設(shè)為auto時纽竣，元素就將垂直水平居中 */
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    animation: dada 2s linear infinite; /*動畫名稱墓贿，持續(xù)時間，線性播放蜓氨，無限持續(xù)*/
}

.circle:nth-child(2) {
    animation-delay: 1s;
}

/* 從0逐漸變?yōu)榘霃綖?00的圓聋袋，同時逐漸變得透明 */
@keyframes dada {
    0% {
        height: 0px;
        width: 0px;
        opacity: 1; /*透明度1,全部顯示*/
    }

    100% {
        height: 100px;
        width: 100px;
        opacity: 0; /*透明度0,看不見了*/
    }
}

改進：如何只用一個圓實現(xiàn)呢？

用偽元素::before和::after穴吹。
html部分代碼:只需要用一個容器幽勒，容器本身用來定位

 <div class="wrapper">

css部分代碼：容器中兩個圓，用::befor和::after來實現(xiàn)

.wrapper {
  height: 200px;
  width: 200px;
  border: 1px solid red;
  /* 將圓形動畫定位到正中 */
  position: relative;
}

.wrapper::before,
.wrapper::after{
  content: '';
  height: 10px;
  width: 10px;
  background-color: black;
  border-radius: 100%;
  /* 將圓形動畫定位到正中 */
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  animation: dada 2s linear infinite;
}

.wrapper::after {
  animation-delay: 1s;
}

@keyframes dada {
  0% {
    height: 0px;
    width: 0px;
    opacity: 1;
  }
  100% {
    height: 100px;
    width: 100px;
    opacity: 0;
  }
}

二港令、將動畫效果加入到網(wǎng)頁中

思路：1啥容、采用fixed，讓其置于所有頁面的正上方顷霹。2咪惠、然后為其添加一個狀態(tài)active，當(dāng)頁面加載完畢時泼返，去除active硝逢，使其不可見姨拥。

html代碼

<div id="siteLoading" class="loading active">
        <div class="loading-animation"></div>
</div>

css部分代碼

.loading {
  display: none;
  background-color: antiquewhite;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-indx: 1;
  justify-content: center;
  align-items: center;
}

.loading.active {
  display: flex;
}

js部分代碼：當(dāng)頁面加載完畢時(在body下添加script即可)绅喉，去除掉loading中的active的class名

  setTimeout(function(){
      siteLoading.classList.remove('active')
    },2000)

這里的setTimeout設(shè)置是為了2000ms的延遲觸發(fā)渠鸽，不然網(wǎng)速太快，loading動畫根本看不見啦柴罐。徽缚。。