效果
主要看充电中...
的效果
![1
实现
<view v-else class="status-working">
<text class="letter letter1">充</text>
<text class="letter letter2">电</text>
<text class="letter letter3">中</text>
<text class="letter letter4">.</text>
<text class="letter letter5">.</text>
<text class="letter letter6">.</text>
</view>
@keyframes letter {
0% {
top: 0;
}
50% {
top: -5rpx;
}
100% {
top: 0rpx;
}
}
.status-working {
.letter {
position: relative;
animation: letter 3s infinite;
}
.letter1 {
animation-delay: 0s;
}
.letter2 {
animation-delay: -0.8s;
}
.letter3 {
animation-delay: -0.6s;
}
.letter4 {
animation-delay: -0.3s;
}
.letter5 {
animation-delay: -0.2s;
}
.letter6 {
animation-delay: -0.1s;
}
}
}