css制作滑动切换

使用CSS Transitions实现滑动切换

通过CSS的transition属性结合transform可以实现平滑的滑动效果。设置一个容器元素，内部放置需要滑动的内容，通过改变transform: translateX()的值触发动画。

.slider-container {
  width: 300px;
  overflow: hidden;
}
.slider-content {
  display: flex;
  transition: transform 0.5s ease;
}
.slide {
  min-width: 100%;
}

// 通过JavaScript改变translateX值
document.querySelector('.next-btn').addEventListener('click', () => {
  const content = document.querySelector('.slider-content');
  content.style.transform = 'translateX(-100%)';
});

使用CSS Animation关键帧

通过@keyframes定义滑动动画序列，适用于需要自动播放或复杂动画路径的场景。

@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
.slider-content {
  animation: slide 2s infinite alternate;
}

纯CSS轮播方案（:target伪类）

利用锚点链接和:target选择器实现无JavaScript的滑动切换。每个滑动面板设置独立ID，通过导航链接触发。

<div class="slider">
  <div id="slide1" class="slide"></div>
  <div id="slide2" class="slide"></div>
</div>
<nav>
  <a href="#slide1">1</a>
  <a href="#slide2">2</a>
</nav>

.slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.slide {
  scroll-snap-align: start;
  min-width: 100%;
}

现代CSS方案（scroll-snap）

CSS Scroll Snap模块提供了原生滚动定位功能，特别适合移动端触摸滑动场景。

.slider-container {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  display: flex;
}
.slide {
  scroll-snap-align: start;
  flex: 0 0 100%;
}

性能优化建议

使用will-change: transform提前告知浏览器可能发生的变换，提升动画性能。避免在动画过程中触发重排属性，如width或left，优先使用transform和opacity。

.slide {
  will-change: transform;
  backface-visibility: hidden;
}