纯CSS实现超长⽂字轮播（⽂字⾛马灯）效果
  在做看板的时候经常会遇到容器宽度不够的情况，如果⽤超长省略会有点不好看，所以我就想做⼀个⽂字⾛马灯的效果，⼀来可以不⽤⿏标悬浮就看到全⽂；⼆来可以为看板增添⼀下动画效果，让看板看起来更炫酷。我开始解决⽅法的时候看到了HTML有⼀个marquee标签，但是很遗憾现在这个标签已经被废弃了，然后我看了⼀些利⽤transform的写法，但是⼀般都是在translateX写了固定宽度，也不符合我想复⽤的要求，还有就是⽤js写的，虽然js可以动态的计算宽度，但js做动画需要定时器，后⾯⽤的话也没有那么的⽅便，⽽且我代码⾥还使⽤了vue-seamless-scroll做轮播，⽤js没办法绑定到组件⾥新加的dom，所以绕来绕去还是需要⽤纯css解决。
  废话说得有点多，先看效果：
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% {
css特效文字
transform: translateX(-100%);
}
}
  其实就是⾥外容器对向滚动，滚动的值为⾥外容器宽度的差值，如果⾥容器与外容器等宽，那么差值就为0，视觉上是没有滚动的，就像第⼀条数据；如果⾥容器宽度⽐外容器宽，⾥容器向左滚动的距离⽐外容器向右滚动的距离⼤，就会形成滚动效果，并在⾥容器translateX为-100%外容器translate为100%时停下，视觉效果就是滚动到⽂字的最右侧。
  PS：⾥容器的float: left；是为了形成块级格式化上下⽂，避免⽂字撑不开容器

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。