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动画则提供更多自定义控制。视差效果适合创建沉浸式体验，关键帧动画适合自动播放的场景。
