样式基于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
}
}
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/155952.html
