css制作滑动页面

使用CSS实现滑动页面

方法1：使用CSS Scroll Snap

Scroll Snap是一种原生CSS特性，允许页面在滚动时自动对齐到特定位置。

.container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
}

.slide {
  scroll-snap-align: start;
  height: 100vh;
}

HTML结构：

<div class="container">
  <div class="slide">第一页</div>
  <div class="slide">第二页</div>
  <div class="slide">第三页</div>
</div>

方法2：使用Transform动画

通过CSS transform属性创建平滑的滑动效果。

.slider {
  display: flex;
  transition: transform 0.5s ease;
}

.slide {
  width: 100vw;
  flex-shrink: 0;
}

/* JavaScript控制transform值 */
document.querySelector('.slider').style.transform = 'translateX(-100vw)';

方法3：全屏滑动效果

创建全屏垂直滑动效果。

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.slide {
  height: 100%;
  position: relative;
  overflow: hidden;
}

.slide-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

方法4：视差滚动效果

通过不同速度的滚动创建深度感。

.parallax {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
}

方法5：CSS关键帧动画

使用@keyframes创建自动滑动效果。

@keyframes slide {
  0% { transform: translateX(0); }
  33% { transform: translateX(-100vw); }
  66% { transform: translateX(-200vw); }
  100% { transform: translateX(0); }
}

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

方法6：响应式滑动布局

确保滑动效果在不同设备上正常工作。

@media (max-width: 768px) {
  .slide {
    width: 100%;
    height: auto;
  }

  .container {
    scroll-snap-type: none;
  }
}

这些方法可以根据具体需求组合使用或单独实现。CSS Scroll Snap在现代浏览器中支持良好，而transform动画则提供更多自定义控制。视差效果适合创建沉浸式体验，关键帧动画适合自动播放的场景。