[分享]css做走马灯思路

走马灯是网站页面常见的一种效果，能够吸引用户的眼球，增加用户的浏览体验。本文将介绍如何使用 CSS 实现走马灯效果。 / HTML结构 / 图片 1 图片 2 图片 3 图片 4 图片 5 图片 ...

走马灯是网站页面常见的一种效果，能够吸引用户的眼球，增加用户的浏览体验。本文将介绍如何使用 CSS 实现走马灯效果。

/* HTML结构 */
<div class="carousel">
  <ul class="carousel-list">
    <li>图片 1</li>
    <li>图片 2</li>
    <li>图片 3</li>
    <li>图片 4</li>
    <li>图片 5</li>
    <li>图片 6</li>
  </ul>
</div>

/* CSS样式 */
.carousel {
  width: 500px; /* 宽度 */
  height: 300px; /* 高度 */
  overflow: hidden; /* 隐藏超出部分 */
}
.carousel-list {
  width: 3000px; /* 一行宽度 */
  height: 300px;
  position: relative; /* 相对定位 */
  left: 0; /* 初始位置 */
  animation: move 20s linear infinite; /* 播放动画 */
}
.carousel-list li {
  width: 500px; /* 每个图片宽度 */
  height: 300px;
  float: left; /* 左浮动 */
  line-height: 300px;
  text-align: center;
  font-size: 50px;
}

/* 动画 */
@keyframes move {
  0% {
    left: 0; /* 初始位置 */
  }
  100% {
    left: -1500px; /* 终止位置 */
  }
} 

通过以上 CSS 代码，我们实现了一个基本的走马灯效果。其中，通过设置容器的宽度和高度并隐藏超出部分，达到只显示定宽高范围内的图片。通过设置每个图片的宽度和左浮动，分别显示每一张图片。而最核心的部分在于使用 CSS3 的动画属性，通过控制每个图片的位置来实现图片的滚动，从而展现走马灯效果。