成品直播源码推荐,实现文字加载效果 文字跳动

发布时间 2023-11-30 14:09:50作者: 云豹科技-苏凌霄

成品直播源码推荐,实现文字加载效果 文字跳动

实现

<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;
}
}
}

​ 以上就是 成品直播源码推荐,实现文字加载效果 文字跳动,更多内容欢迎关注之后的文章