当前位置：首页 > 教程 > 正文

两个小球交替的加载动画纯CSS3loading动画

隔壁老李
教程
2022-03-26 10:04:26
54571

最近几天一直在搞微信小程序，猫贝同学建议用两个小球的loading动画，于是一阵折腾。

效果如下：

两个小球交替的加载动画纯CSS3loading动画第1张

纯CSS动画，直接上代码。

HTML部分：

<!DOCTYPE html>
<html>
<head>
<title>球</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="blocks">
  <div class="block red"></div>
  <div class="block blue"></div>
</div>
</body>
</html>

CSS部分：

.blocks {
  height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  justify-content: center;
}
.block {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  mix-blend-mode: lighten;
}
.red {
  background: #FA167C;
  -webkit-animation: attract-orange 700ms cubic-bezier(0.3, 0.5, 0.4, 0.9) infinite alternate-reverse;
  animation: attract-orange 700ms cubic-bezier(0.3, 0.5, 0.4, 0.9) infinite alternate-reverse;
}
.blue {
  background: #0A0BF5;
  -webkit-animation: attract-blue 700ms cubic-bezier(0.3, 0.5, 0.4, 0.9) infinite alternate-reverse;
  animation: attract-blue 700ms cubic-bezier(0.3, 0.5, 0.4, 0.9) infinite alternate-reverse;
}

@-webkit-keyframes attract-orange {
  to {
    -webkit-transform: translateX(calc(20px + calc(20px / 4)));
    transform: translateX(calc(20px + calc(20px / 4)));
  }
}
@keyframes attract-orange {
  to {
    -webkit-transform: translateX(calc(20px + calc(20px / 4)));
    transform: translateX(calc(20px + calc(20px / 4)));
  }
}
@-webkit-keyframes attract-blue {
  to {
    -webkit-transform: translateX(calc(20px * -1 - calc(20px / 4)));
    transform: translateX(calc(20px * -1 - calc(20px / 4)));
  }
}
@keyframes attract-blue {
  to {
    -webkit-transform: translateX(calc(20px * -1 - calc(20px / 4)));
    transform: translateX(calc(20px * -1 - calc(20px / 4)));
  }
}