CSS 实现网页走马灯效果 - 详细教程和代码示例

走马灯是一种在网页上循环滚动显示内容的效果，可以通过 CSS 和 JavaScript 来实现。以下是使用 CSS 实现走马灯的示例代码：

HTML 代码：

<div class='carousel'>
  <ul class='carousel-list'>
    <li class='carousel-item'>Item 1</li>
    <li class='carousel-item'>Item 2</li>
    <li class='carousel-item'>Item 3</li>
    <li class='carousel-item'>Item 4</li>
    <li class='carousel-item'>Item 5</li>
  </ul>
</div>

CSS 代码：

.carousel {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.carousel-list {
  width: 500%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  animation: carouselAnimation 10s linear infinite;
}

.carousel-item {
  width: 20%;
  height: 100%;
  float: left;
  list-style: none;
}

@keyframes carouselAnimation {
  0% {
    left: 0;
  }
  20% {
    left: 0;
  }
  25% {
    left: -100%;
  }
  45% {
    left: -100%;
  }
  50% {
    left: -200%;
  }
  70% {
    left: -200%;
  }
  75% {
    left: -300%;
  }
  95% {
    left: -300%;
  }
  100% {
    left: 0;
  }
}

上述代码中，通过设置 .carousel 的 width 和 height 来确定走马灯容器的大小，并设置 overflow: hidden; 来隐藏超出容器范围的内容。.carousel-list 是走马灯内容的容器，设置 position: absolute; 和 left: 0; 来确定起始位置，并使用 animation 属性和 carouselAnimation 动画来实现循环滚动效果。.carousel-item 是每个滚动项的样式，可以根据实际需求进行修改。

需要注意的是，在示例代码中，走马灯的宽度是通过 .carousel-item 的个数来计算的，即每个 .carousel-item 的宽度为容器宽度的 1/5。如果需要显示更多或更少的滚动项，需要相应调整 .carousel-item 的宽度和 .carousel-list 的宽度。