效果一
html
<view class="container">
<view class="dot dot-1"></view>
<view class="dot dot-2"></view>
<view class="dot dot-3"></view>
</view>
css
.container {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.dot {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #000;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.dot-3 {
background-color: #f74d75;
}
.dot-2 {
background-color: #10beae;
}
.dot-1 {
background-color: #ffe386;
}
.dot-3 {
background-color: #f74d75;
animation: dot-3-move 2s ease infinite;
}
@keyframes dot-3-move {
20% {
transform: scale(1)
}
45% {
transform: translateY(-18px) scale(.45)
}
60% {
transform: translateY(-25px) scale(.45)
}
80% {
transform: translateY(-25px) scale(.45)
}
100% {
transform: translateY(0px) scale(1)
}
}
.dot-2 {
background-color: #10beae;
animation: dot-2-move 2s ease infinite;
}
.dot-1 {
background-color: #ffe386;
animation: dot-1-move 2s ease infinite;
}
@keyframes dot-2-move {
20% {
transform: scale(1)
}
45% {
transform: translate(-16px, 12px) scale(.45)
}
60% {
transform: translate(-20px, 15px) scale(.45)
}
80% {
transform: translate(-20px, 15px) scale(.45)
}
100% {
transform: translateY(0px) scale(1)
}
}
@keyframes dot-1-move {
20% {
transform: scale(1)
}
45% {
transform: translate(16px, 12px) scale(.45)
}
60% {
transform: translate(20px, 15px) scale(.45)
}
80% {
transform: translate(20px, 15px) scale(.45)
}
100% {
transform: translateY(0px) scale(1)
}
}
.container {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: rotate-move 2s ease-in-out infinite;
}
@keyframes rotate-move {
55% {
transform: translate(-50%, -50%) rotate(0deg)
}
80% {
transform: translate(-50%, -50%) rotate(360deg)
}
100% {
transform: translate(-50%, -50%) rotate(360deg)
}
}
效果二
<div class="loader-container">
<div class="loader"></div>
</div>
.loader-container {
display: flex;
justify-content: center;
align-items: center;
height: 50vh;
}
.loader {
width: 70px;
height: 70px;
border: 2px solid #999;
border-top-color: #fff;
border-radius: 50%;
animation: spin 1s infinite linear;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
想要源码或有问题可扫下方二维码下载或联系客服