CSS3网页加载动画

本篇文章分享纯CSS+HTML加载动画代码

主要用到css3的动画

HTML代码如下

<div id="start-screen">
        <div class="in-start">
            <div class="first"></div>
            <div class="second"></div>
            <div class="third"></div>
        </div>
    </div>

CSS代码如下:

html {
height: 100%;
}

body {
  height: 100%;
}

#start-screen {
  height: 100%;
  width: 100%;
  background-color: #ccc;
  opacity: 80%;
  position: fixed;
  z-index: 999;
}

.in-start {
  height: 50px;
  width: 50px;
  position: absolute;
  margin-top: -45px;
  margin-left: -25px;
  top: 50%;
  left: 50%;
}

.in-start .first,
.in-start .second,
.in-start .third {
  height: 25px;
  width: 25px;
  position: absolute;
  float: left;
  border-radius: 50%;
}

.first {
  background-color: #ff0;
  animation: fir 1s linear 0.1s infinite;
  top: 0;
  left: 0;
}

.second {
  background-color: #0f0;
  animation: sec 1s linear 0.2s infinite;
  top: 0;
  left: 25px;
}

.third {
  background-color: #00f;
  animation: thi 1s linear 0s infinite;
  top: 25px;
  left: 0;
}

@keyframes fir {
  0% {
    top: 0;
    left: 0;
  }
  25% {
    top: 25px;
    left: 0;
  }
  50% {
    top: 25px;
    left: 25px;
  }
  75% {
    top: 0px;
    left: 25px;
  }
}

@keyframes sec {
  0% {
    top: 0;
    left: 25px;
  }
  25% {
    top: 0;
    left: 0;
  }
  50% {
    top: 25px;
    left: 0;
  }
  75% {
    top: 25px;
    left: 25px;
  }
}

@keyframes thi {
  0% {
    top: 25px;
    left: 0;
  }
  25% {
    top: 25px;
    left: 25px;
  }
  50% {
    top: 0;
    left: 25px;
  }
  75% {
    top: 0;
    left: 0;
  }
}

网页加载完成后, 可以用JS移除根元素