实现文字滚动效果

效果：

<template>
 <div class="scroll-container">
   <p :style="animationStyle" class="scroll-text">{{ scrollText }}</p>
 </div>
 </template>
 <script>
 export default {
   data() {
    return {
      scrollText:
        "预计8月7日14时至8日14时，西北地区东部、东北地区西部、华北南部、黄淮、西南地区东部和南部等地的部分地区将有小时雨量大于20毫米的短时强降水天气，其中，甘肃东部、山西南部、河南中北部等地的部分地区小时雨量大于50毫米，最大可达80毫米以上；黑龙江西南部、河北北部、山西南部、河南中北部、山东南部、江苏北部等地的部分地区将有8-10级雷暴大风或冰雹天气。",
      // 动画时长可以根据文字长度和滚动频率进行调整
      animationDuration: "5s",
      }
      },
  computed: {
    animationStyle() {
      return {
        animation: `scroll ${this.animationDuration} linear infinite`,
      };
    },
  },
 }
 </script>
 <style scoped>
   .scroll-container {
    overflow: hidden;
    /* 设置容器高度以隐藏滚动区域 */
    width: 1821px;
    height: 227px;
    margin-left: 89px;
    margin-top: 53px;
    font-weight: 400;
    font-size: 36px;
    color: #D3D8FF;
    line-height: 64px;
    text-indent: 4ch;
    }
   
  .scroll-text {
    /* 设置文字需要滚动的距离 */
    position: relative;
    top: 0;
    animation-name: scroll;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate; /* 交替反向播放动画 */
  }
   
  @keyframes scroll {
    from {
      top: 0;
    }
    to {
      top: -227px; /* 根据需要滚动的像素数进行调整 */
    }
  }
  </style>