div内容无限横向滚动

最新推荐文章于 2024-02-27 13:43:21 发布

zmyalh

最新推荐文章于 2024-02-27 13:43:21 发布

阅读量489

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/zmyalh/article/details/132101029

版权

div内容无限横向滚动

<div class="modeAnimation">
  <p>滚动内容,内容过长持续滚动</p>
</div>

样式

.modeAnimation
  height: 20px;
  width: 300px;
  overflow: hidden;
  p
    display: inline-block;
    white-space: nowrap;
    animation: 10s scroll linear infinite ;
    transition: scroll 0.5s ease;
  @keyframes scroll {
    0% {
      transform: translateX(0%);
      -webkit-transform: translateX(0%);
    }
    100% {
      transform: translateX(-98%);
      -webkit-transform: translateX(-98%);
    }
  }