公告/消息提示从右向左循环滚动vue

h_65432102026-04-25 11:24

1.图示

2.代码

animationDuration（滚动时间），可以根据提示字数的多少进行修改

html 复制代码

<div class="base-header-notice">
      <img
          src="@/assets/images/notice.png"
          style="width:16px;height:16px;margin-right:5px;"
      >
      <div class="notice-scroll-wrap">
          <div
              class="base-header-notice-text"
              :style="{
                  animationDuration: '10s',
                  animationPlayState: 'running' 
              }"
          >
            <div style="color: #4377FF;">
               2026年测试时间：03月17日至04月17日!
            </div>
          </div>
      </div>
</div>

css 复制代码

.base-header-notice {
  display: flex;
  align-items: center;
  margin-right: 10px;
  width: 300px;
  overflow: hidden;

  .notice-scroll-wrap {
    width: 100%;
    overflow: hidden;
    position: relative;

    .base-header-notice-text {
      display: inline-block;
      white-space: nowrap;
      animation: scrollText linear infinite;
      will-change: transform;
      /* 让文字从最右侧外开始 */
      padding-left: 100%; 
    }
  }
}


/* 滚动动画：从右往左移动 */
@keyframes scrollText {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}