三点运动加载loading动画-html代码-BFW代码库

三点运动加载loading动画

代码语言：html

代码描述：三点运动加载loading动画

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
html,
body {
  margin: 0;
  height: 100%;
}

body {
  -webkit-box-align: center;
          align-items: center;
  background: #69c2a3;
  background-image: linear-gradient(45deg, #f7fcfd, #e8f6f9, #d5efed, #b7e4da, #8fd4c1, #69c2a3, #49b17f, #2f995a, #157f3c);
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
}

.loader {
  -webkit-animation: rotate 2s linear infinite normal;
          animation: rotate 2s linear infinite normal;
  height: 1rem;
  position: relative;
  width: 1rem;
}
.loader__ball {
  -webkit-animation: move1 1s ease-out infinite alternate;
          animation: move1 1s ease-out infinite alternate;
  background-color: #fff;
  border-radius: 50%;
  height: 100%;
  position: absolute;
  width: 100%;
}
.loader__ball:nth-of-type(2) {
  -webkit-animation-name: move2;
          animation-name: move2;
}
.loader__ball:nth-of-type(3) {
  -webkit-animation-name: move3;
          animation-name: move3;
}

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rotate {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes move1 {
  0%, 5% {
    -webkit-transform: transla.........完整代码请登录后点击上方下载按钮下载查看