纯CSS3loading动画红蓝小球交替的加载动画

前端笔记 duan 2023-06-27 02:50 1442 0

纯CSS3loading动画红蓝小球交替的加载动画网页加载特效，该效果常用于手机版网页，小程序或app内

效果如下：

该特效由纯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)));
  }
}