[分享]css内容溢出自动跑马灯滚动

在页面排版中，有时候我们希望某个元素的内容超出了其容器的尺寸限制也能够显示出来。此时，我们可以考虑采用内容溢出自动跑马灯滚动的方法让元素内容以动画的形式自动滚动。.scroll { overflow:...

在页面排版中，有时候我们希望某个元素的内容超出了其容器的尺寸限制也能够显示出来。此时，我们可以考虑采用内容溢出自动跑马灯滚动的方法让元素内容以动画的形式自动滚动。

.scroll {
  overflow: hidden;
  white-space: nowrap;
  animation: marquee 5s linear infinite;
}

@keyframes marquee {
  0% {transform: translateX(0);}
  100% {transform: translateX(-100%);}
}

在上述代码中，我们首先为需要滚动的元素指定一个固定的高度和宽度，并将其 overflow 属性设置为 hidden 用以隐藏超出容器部分的内容。接着，我们将其 white-space 属性设置为 nowrap，用以让元素内容在一行内连续显示。

最后，我们为该元素添加一个无限循环的动画，通过 transform: translateX() 函数以水平方向对元素进行移动，实现滚动效果。此处我们设置了一个 5 秒的滚动周期。你也可以根据需要进行调整。

使用 CSS 实现内容溢出自动跑马灯滚动，不仅能够增强页面的交互性和可读性，还能为我们节省对 JS 库的依赖，提高页面加载速度。值得我们在实际开发中灵活运用！