加载中 - 波浪效果

            
            /* 使用伪元素显示加载文本 */
    .text1:before {
      content: "加载中...";
    }
    .text2:before {
      content: "Loading...";
    }
    .text3:before {
      content: "正在加载，请稍候...";
    }

    /* 加载动画的主要样式 */
    .loader {
      /* 使用视窗宽度(vw)作为字体大小单位，实现响应式设计 */
      font-size: 10vw;
      line-height: 2;
      font-family: system-ui, sans-serif;
      font-weight: bold;
      text-transform: uppercase;
      
      /* 文字颜色透明，使用描边效果 */
      color: #0000;
      -webkit-text-stroke: 2px #8A2BE2;
      
      /* 使用径向渐变创建动画效果
         创建两层渐变：上层和下层
         通过background-position的变化实现动画 */
      background:
        radial-gradient(1.13em at 50% 1.6em, #8A2BE2 99%, #0000 101%) calc(50% - 1.6em) 0/3.2em 100% text,
        radial-gradient(1.13em at 50% -0.8em, #0000 99%, #8A2BE2 101%) 50% .8em/3.2em 100% repeat-x text;
      
      /* 应用动画：持续2秒，线性变化，无限循环 */
      animation: l9 2s linear infinite;

      /* 文本水平居中对齐 */
      text-align: center;
    }

    /* 定义动画关键帧
       通过改变背景位置创造流动效果 */
    @keyframes l9 {
      to {
        background-position: calc(50% + 1.6em) 0, calc(50% + 3.2em) .8em
      }
    }

    /* 页面布局样式 */
    body {
      margin: 0;
      /* 使用grid布局使内容垂直水平居中 */
      display: grid;
      min-height: 100vh;
      place-content: center;
      /* 设置背景色 */
      background: #F0E6FF;
    }