样式基于colorUI
<template>
<view class="flex flex-direction justify-center startPannel">
<image src="../../static/logo.png" class="cu-avatar lg round margin-left startLogo"></image>
<view class="text-center startTitle text-xl">
仓鼠的仓
</view>
<view class="stage">
<view class="dot-flashing"></view>
</view>
</view>
</template>
page{
background-color: #fff;
}
.startPannel {
padding-top: 61upx;
}
.startTitle {
margin-top: 30upx;
}
.startLogo {
margin: 0 auto;
}
.stage {
display: flex;
justify-content: center;
align-items: center;
padding: 40upx 0;
margin: 0 -5%;
overflow: hidden;
}
.dot-flashing::before {
left: -30upx;
animation: dotFlashing 0.5s infinite alternate;
animation-delay: 0s;
}
.dot-flashing {
position: relative;
width: 12upx;
height: 12upx;
border-radius: 50%;
background-color: #acacac;
color: #acacac;
animation: dotFlashing 0.5s infinite linear alternate;
animation-delay: .25s;
}
.dot-flashing::after {
left: 30upx;
animation: dotFlashing 0.5s infinite alternate;
animation-delay: .5s;
}
.dot-flashing::before,
.dot-flashing::after {
content: '';
display: inline-block;
position: absolute;
top: 0;
width: 12upx;
height: 12upx;
border-radius: 50%;
background-color: #acacac;
color: #acacac;
}
@keyframes dotFlashing {
0% {
background-color: #acacac
}
100% {
background-color: #6c6c6c
}
}