js文字如何轮播？

本文主要是介绍js文字如何轮播？，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

<div class="td-style">
  <span class="td-text">内容1内容1内容1内容1内容1内容1</span>
</div>
css：
<style>
    .td-style {
      width: 160px;
      height: 72px;
      overflow: hidden;
      white-space: nowrap;
      font-size: 26px;
      line-height: 72px;
    }
    .td-text {
      display: inline-block;
      white-space: nowrap;
      animation: scrollLeft 3s linear infinite;
    }
    .td-text:hover {
      animation-play-state: paused;
    }
     /* 定义动画 */
    @keyframes scrollLeft {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(calc(-90% - 0px)); /* 加上一些额外的空白，以便滚动到最后一个元素时不会立即切换 */
      }
    }
</style>

这篇关于js文字如何轮播？的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---