纯CSS实现超长文字轮播（文字走马灯）效果

2021-11-22 16:04:57 阅读：339 来源： 互联网

标签：文字容器 translateX 轮播 marquee 100% transform 超长 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% {
    transform: translateX(-100%);
  }
}

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

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

标签：文字,容器,translateX,轮播,marquee,100%,transform,超长,CSS
来源： https://www.cnblogs.com/LumenCallisto/p/15588874.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

纯CSS实现超长文字轮播（文字走马灯）效果