如何做一个简单的网页加载动画

一、如何实现这个动画

思路：一个黑色实心圆逐渐变大，同时透明度逐渐降低。然后将第二个相同圆的动画效果延时1s。

html部分代码

css部分代码

.wrapper {
    height: 100px;
    width: 100px;
    border: 1px solid red; /*宽高的设定，为了方便观察*/
    position: relative; /*为了将circle定位*/
}

.circle {
    height: 10px;
    width: 10px;
    background-color: black;
    border-radius: 100%;
    /* 将circle绝对定位，当上下左右都设置为0，
    同时margin设为auto时，元素就将垂直水平居中 */
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    animation: dada 2s linear infinite; /*动画名称，持续时间，线性播放，无限持续*/
}

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

/* 从0逐渐变为半径为100的圆，同时逐渐变得透明 */
@keyframes dada {
    0% {
        height: 0px;
        width: 0px;
        opacity: 1; /*透明度1,全部显示*/
    }

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

改进：如何只用一个圆实现呢？

用伪元素::before和::after。
html部分代码:只需要用一个容器，容器本身用来定位

css部分代码：容器中两个圆，用::befor和::after来实现

.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;
  }
}

二、将动画效果加入到网页中

思路：1、采用fixed，让其置于所有页面的正上方。2、然后为其添加一个状态active，当页面加载完毕时，去除active，使其不可见。

html代码

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部分代码：当页面加载完毕时(在body下添加script即可)，去除掉loading中的active的class名

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

这里的setTimeout设置是为了2000ms的延迟触发，不然网速太快，loading动画根本看不见啦。。。