成品直播原始碼推薦,實現文字載入效果 文字跳動

zhibo系統開發發表於2023-11-30

成品直播原始碼推薦,實現文字載入效果 文字跳動

實現

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

 以上就是 成品直播原始碼推薦,實現文字載入效果 文字跳動,更多內容歡迎關注之後的文章


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69978258/viewspace-2998243/,如需轉載,請註明出處,否則將追究法律責任。

相關文章