CSS 走马灯效果实现：简单易懂的代码示例

.carousel {
  width: 200px;
  height: 50px;
  overflow: hidden;
}

.carousel ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 500%;
  animation: carousel 10s linear infinite;
}

.carousel ul li {
  float: left;
  width: 20%;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

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

解释：

• .carousel 是最外层的容器，设置了宽度、高度和溢出隐藏。
• .carousel ul 是滚动的元素，使用了无序列表 (ul) 来存放要滚动的内容。设置了列表样式、外边距、内边距和宽度等属性，并使用了动画 (animation) 属性来实现滚动效果。
• .carousel ul li 是滚动元素里面的子元素，每个子元素都是一个要滚动的内容。设置了浮动、宽度、高度、行高和文本居中等属性。
• @keyframes carousel 是定义动画的关键帧，从 0% 到 100% 分别设定了滚动元素的水平位移。在这里，我们使用了 translateX() 函数来实现水平位移，-80% 的位移相当于显示了第 5 个子元素，接着又从第 1 个子元素开始循环。最后，我们在 .carousel ul 上应用了这个动画。

效果：