css制作滑动图片

使用CSS制作滑动图片效果

滑动图片效果可以通过CSS的overflow、white-space和animation属性实现。以下是两种常见方法：

横向滑动效果

通过@keyframes动画控制水平位移，实现无限循环滑动：

.slider-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.slider-track {
  display: flex;
  animation: slide 10s linear infinite;
}

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

.slider-item {
  flex: 0 0 auto;
  width: 300px;
  margin-right: 20px;
}

HTML结构：

<div class="slider-container">
  <div class="slider-track">
    <img class="slider-item" src="image1.jpg">
    <img class="slider-item" src="image2.jpg">
    <!-- 更多图片... -->
  </div>
</div>

淡入淡出滑动效果

结合opacity和transform实现优雅过渡：

.fade-slider {
  position: relative;
  height: 400px;
}

.fade-slider img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  animation: fade 8s infinite;
}

.fade-slider img:nth-child(1) { animation-delay: 0s; }
.fade-slider img:nth-child(2) { animation-delay: 2s; }
.fade-slider img:nth-child(3) { animation-delay: 4s; }

@keyframes fade {
  0%, 100% { opacity: 0; }
  20%, 80% { opacity: 1; }
}

响应式调整

添加媒体查询确保移动设备适配：

@media (max-width: 768px) {
  .slider-item {
    width: 200px;
  }

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

性能优化技巧

使用will-change属性提升动画性能：

.slider-track {
  will-change: transform;
}

避免使用box-shadow等耗性能的属性，改用transform: translateZ(0)触发硬件加速：

.slider-item {
  transform: translateZ(0);
}

以上方法可根据实际需求组合使用，通过调整动画时间和关键帧百分比可获得不同的滑动节奏效果。