复制一份,然后一定要把播放开始位置设置成0px(css块儿里的固定位置),我刚开始设置的50px,想着有点儿缝隙不贴边儿,结果!根本无法实现无缝滚动。
不想无缝滚动的话就不用复制一份了,代码也不用改。

<div class="notice-card-wrapper">
  <div class="inner-container">
    <div class="content">
      <div class="content-1" style="flex: 1;float: left;">{{'abcdefg'}}</div>
      <div class="content-2" style="flex: 1;">{{'abcdefg'}}</div>
    </div>
  </div>
</div>

css部分

<style lang="scss">
  .notice-card-wrapper {
  .inner-container {
    display: flex;
    margin-left: auto; // 把文字弄出可见区域
    width: auto;
    animation-name: myMove;
    animation-duration: 3s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-direction: normal;
  }
  /*文字无缝滚动*/
  @keyframes myMove {
    0% {
      transform: translateX(0px);
    }
    100% {
      transform: translateX(-100%);
    }
  }
}
Logo

分享最新的 NVIDIA AI Software 资源以及活动/会议信息,精选收录AI相关技术内容,欢迎大家加入社区并参与讨论。

更多推荐