首页 网络技术
  1. 正文

css3实现两个球体交替的加载动画

效果如下:

css3实现两个球体交替的加载动画

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

纯CSS动画,复制下面的css代码到style.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)));
  }
}

本文标题:css3实现两个球体交替的加载动画
本文链接:https://www.qqooo.cn/post/2222.html
版权说明:网站文章均来源于手工整理和网友投稿,若有不妥之处请来信 feelym@88.com 处理,谢谢!