首页 > 文章资讯 > 技术教程 > zblog教程 > zblog实现两个小球交替的加载动画纯CSS3loading动画

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

时间：2023年05月21日

来源：网络

编辑：佚名

最近几天一直在搞微信小程序，有人建议用两个小球的loading动画，于是一阵折腾。
效果如下：
两个小球交替的加载动画纯CSS3loading动画第1张

两个小球交替的加载动画纯CSS3loading动画第1张
纯CSS动画，直接上代码。
HTML部分：
点击复制代码 Markup
<!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部分：
点击复制代码 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)));
}
}

新闻资讯更多

猜你需要

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

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