两个小球交替的加载动画 纯CSS3loading动画
原创
最近几天一直在搞微信小程序，猫贝同学建议用两个小球的loading动画，于是一阵折腾。
效果如下：
纯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)));
}
}原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
