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

一、如何实现这个动画

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

html部分代码

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

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部分代码:只需要用一个容器，容器本身用来定位

 <div class="wrapper">

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代码

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

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

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

作者：饥人谷_朱笑笑啊
链接：https://www.jianshu.com/p/5f88ef3d980d