前端小程序 实现文字加载效果 文字跳动

效果

主要看充电中...的效果
![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;
				}
			}

		}