十大仓库管理软件_十大装修公司_抖音关键词排名查询_广州网络推广专员

  <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>

.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;是为了形成块级格式化上下文，避免文字撑不开容器