css3实现水平无限滚动效果（ul下元素不确定时动态设置ul宽度）

在html页面中循环展示信息的功能一般是用js来实现的，那么用CSS3该如何实现实现呢

使用CSS3来实现

用CSS3的属性实现的话，能委以重任的恐怕只有animation属性了

html:

  <div class="container">
    <ul>
      <li>我是001</li>
      <li>我是002</li>
      <li>我是003</li>
      <li>我是004</li>
      <li>我是005</li>
      <li>我是006</li>
      <li>我是007</li>
      <li>我是008</li>
      <li>我是009</li>
    </ul>
  </div>

这里用到width: max-content;属性来使ul元素的宽度保持与所有li元素宽度之和相同，我们来试一下

css

* {
  padding: 0;margin: 0;
}
ul,li {
  list-style: none;
}
.container {
  position: absolute;
  width: 500px;
  height: 200px;
  overflow: hidden;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: pink;
}
ul {
  display: flex;
  justify-content: flex-start;
  width: max-content;
  animation: slideLeft 5s linear 0s infinite;
}
li {
  float: left;
  padding-right: 20px;
}
@keyframes slideLeft {
  0% {
    transform: translateX(500px);
  }
  100% {
    transform: translateX(-100%);
  }
}

在codepen中自己试一下吧，预览地址

如果帮您解决了问题，别忘了点个赞再走喔.