用Tailwind做一个文字流动动效组件

<template>
  <!-- 全屏遮罩 -->
  <div
    :class="[
      'fixed inset-0 z-9999',
      'size-full',
      'bg-red-500',
      'flex justify-center items-center',
    ]"
  >
    <!-- 文字容器 -->
    <div
      :class="['absolute w-150 h-10', 'left-1/2 top-1/2 -ml-75', 'overflow-visible', 'select-none']"
    >
      <!-- 单文字 -->
      <div
        v-for="(item, index) in animationText"
        :key="index"
        :style="{ animationDelay: `${index * 0.35}s` }"
        :class="[
          'animation_text',
          'lg:text-4xl text-2xl text-white font-bold text-shadow-xl text-shadow-white',
          'absolute w-5 h-10 opacity-0',
        ]"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  const animationText = '...GNIDAOL'
</script>

<style scoped>
  .animation_text {
    animation: move 4s linear infinite;
  }

  @keyframes move {
    0% {
      left: 0;
      opacity: 0;
    }
    35% {
      left: 41%;
      transform: rotate(0deg);
      opacity: 1;
    }
    65% {
      left: 59%;
      transform: rotate(0deg);
      opacity: 1;
    }
    100% {
      left: 100%;
      transform: rotate(-180deg);
      opacity: 0;
    }
  }
</style>