当前位置：首页 > CSS

css制作滑动页面

2026-01-08 19:10:05CSS

使用CSS实现滑动页面

通过CSS可以实现多种滑动页面效果，包括横向滑动、纵向滑动以及视差滚动等。以下是几种常见的实现方法：

横向滑动效果

横向滑动通常用于展示一组卡片或图片，可以通过CSS的overflow和white-space属性实现：

.slider-container {
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}

.slider-item {
  display: inline-block;
  width: 300px;
  height: 200px;
  margin-right: 10px;
  background-color: #f0f0f0;
}

HTML结构：

<div class="slider-container">
  <div class="slider-item"></div>
  <div class="slider-item"></div>
  <div class="slider-item"></div>
</div>

纵向滑动效果

纵向滑动可以通过CSS的overflow-y属性实现，常用于长内容的滚动：

.scroll-container {
  height: 300px;
  overflow-y: scroll;
}

视差滚动效果

视差滚动通过不同的滚动速度创建深度感，可以使用background-attachment: fixed实现：

.parallax-section {
  height: 500px;
  background-image: url('image.jpg');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

平滑滚动

为整个页面添加平滑滚动效果，可以在html元素上设置：

html {
  scroll-behavior: smooth;
}

使用CSS动画实现滑动

通过CSS的transform和transition属性可以实现元素滑动动画：

.slide-in {
  transform: translateX(-100%);
  transition: transform 0.5s ease-out;
}

.slide-in.active {
  transform: translateX(0);
}

JavaScript触发：

document.querySelector('.slide-in').classList.add('active');

响应式滑动菜单

移动端常见的侧滑菜单可以通过以下CSS实现：

.mobile-menu {
  position: fixed;
  top: 0;
  left: -250px;
  width: 250px;
  height: 100%;
  background: #333;
  transition: left 0.3s ease;
}

.mobile-menu.open {
  left: 0;
}