vue3使用原生HTML元素marquee标签实现文字滚动效果，控制台报警告

近期有个需求：管理员后台更新版本公告后，前台要在头部滚动展示公告内容。

上图：

起初我用了html自带的marquee标签实现文字滚动效果，但是vue3环境控制台会报警告

后来查阅资料找到原因是因为其被弃用了

为了解决报错，用css动画手写了一个文字滚动效果

  <div class="rollBox">
    <!-- <marquee behavior="scroll" direction="left" width="500" scrollamount="5" scrolldelay="1"> -->
    <div class="marquee">
      <span class="scrollStyle">更新日期：{{ listData.preTime }}</span>
      <span class="scrollStyle">版本：{{ listData.title }}</span>
      <span class="scrollStyle">更新内容：{{ listData.VContent }}</span>
    </div>
    <!-- </marquee> -->
  </div>

.scrollStyle {
  margin-right: 15px;
  font-size: 13px;
  color: #606266;
}

.rollBox {
  width: 500px;
  height: 60px;
  line-height: 60px;
  white-space: nowrap;
  overflow: hidden;
  margin: 0 auto;
}

.marquee {
  width: 100%;
  font-size: 13px;
  color: #606266;
  // animation: marquee-right 20s linear infinite;
  /* @keyframes 动画指定名称。 */
  animation-name: marquee-left;
  /* 定义动画完成一个周期需要多少秒或毫秒 */
  animation-duration: 18s;
  /* 速度曲线 */
  animation-timing-function: linear;
  /* 定义动画应该播放多少次 */
  animation-iteration-count: infinite;
}
// 从右向左
@keyframes marquee-left {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-170%);
  }
}

// 从左向右
@keyframes marquee-right {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}
// 从上到下
@keyframes marquee-top {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(100%);
    }
}
// 从下到上
@keyframes marquee-bottom {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(100%);
    }
}
//鼠标滑动到上边动画暂停
.marquee:hover {
  animation-play-state: paused;
  cursor: pointer;
}

查阅资料链接：

https://blog.csdn.net/djh052900/article/details/131357367

https://blog.csdn.net/ch_13157582015/article/details/128784562

自己记录方便了自己巩固知识，同时也希望对遇到同样问题的你有帮助！！！