纯css实现文字超出自动滚动

@ZhaoYunyao2024-10-16 11:30

html 复制代码

  <ul class="list">
      <li class="item marquee">
        <div class="marquee-wrap">
          <div class="marquee-content ">
            这个是非超长数据
          </div>
        </div>
      </li>
      <li class="item marquee">
        <div class="marquee-wrap">
          <div class="marquee-content ">
            这个是超长数据，我超长了哦，我超长了哦，我超长了哦
          </div>
        </div>
      </li>
    </ul>

css 复制代码

.marquee {
  overflow: hidden;
}

.marquee .marquee-wrap {
  width: 100%;
  animation: marquee-wrap 4s infinite linear;
}

.marquee .marquee-content {
  float: left;
  white-space: nowrap;
  min-width: 100%;
  animation: marquee-content 4s infinite linear;
}

@keyframes marquee-wrap {
  0%,
  30% {
    transform: translateX(0);
  }
  70%,
  100% {
    transform: translateX(100%);
  }
}

@keyframes marquee-content {
  0%,
  30% {
    transform: translateX(0);
  }
  70%,
  100% {
    transform: translateX(-100%);
  }
}

其实就是里外容器对向滚动，滚动的值为里外容器宽度的差值，如果里容器与外容器等宽，那么差值就为0，视觉上是没有滚动的，就像第一条数据；如果里容器宽度比外容器宽，里容器向左滚动的距离比外容器向右滚动的距离大，就会形成滚动效果，并在里容器translateX为-100%外容器translate为100%时停下，视觉效果就是滚动到文字的最右侧。

PS：里容器的float: left;是为了形成块级格式化上下文，避免文字撑不开容器