ul li 自动滚动

要实现 ul li 自动滚动，可以使用 CSS 和 JavaScript 来完成。下面是一个实现的示例代码：

1. 首先，在 HTML 中创建一个 ul 列表，并为其添加一个 ID：

<ul id="scroll-list">
  <li>第一条内容</li>
  <li>第二条内容</li>
  <li>第三条内容</li>
  <li>第四条内容</li>
  <li>第五条内容</li>
</ul>

2. 在 CSS 中设置 ul 列表的宽度、高度和溢出隐藏属性，并添加动画效果：

#scroll-list {
  width: 200px;
  height: 100px;
  overflow: hidden;
  animation: scroll 10s infinite;
}

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

3. 使用 JavaScript 来获取 ul 列表的宽度，并根据宽度计算滚动的动画时间：

window.addEventListener('load', function() {
  var list = document.getElementById('scroll-list');
  var width = list.scrollWidth;
  var duration = width / 50; // 滚动速度为每秒移动50像素

  list.style.animationDuration = duration + 's';
});

以上代码将 ul 列表的内容自动向左滚动，并在滚动至末尾后重新开始滚动。滚动的速度是根据 ul 列表的宽度来计算的，每秒移动50像素。可以根据实际需要来调整滚动速度和持续时间。