CSS 故障的效果（仿抖音）

<template>
  <!-- 创建一个视图容器，用于装载加载动画 -->
  <view class="loader">
    <!-- 使用data-glitch属性存储原始文本内容，在CSS中通过attr()函数获取 -->
    <view data-glitch="加载中..." class="glitch">加载中...</view>
  </view>
</template>
 
<script>
 
// 此处未编写JavaScript代码，通常在script标签内会定义组件的数据、方法和生命周期钩子等
 
</script>
 
<style>
  /* 设置页面背景颜色 */
  body {
    background-color: #212121;
  }
 
  /* 定义加载动画的容器样式，设置其垂直居中显示及水平位置 */
  .loader {
    margin-top: 350px;
    margin-left: 40%;
  }
 
  /* 定义主加载文字样式，并添加动画效果 */
  .glitch {
    position: relative; /* 设置为相对定位，以便于绝对定位子元素 */
    font-size: 25px; /* 文字大小 */
    font-weight: 700; /* 加粗字体 */
    line-height: 1.2; /* 行高 */
    color: #fff; /* 文字颜色为白色 */
    letter-spacing: 5px; /* 字间距 */
    z-index: 1;