css制作翻页

CSS制作翻页效果

使用CSS可以创建简单的翻页效果，通常结合HTML和少量JavaScript实现交互。以下是几种常见的翻页实现方法：

纯CSS翻页（无交互） 通过CSS动画和关键帧实现视觉上的翻页效果：

.page {
  width: 200px;
  height: 300px;
  position: relative;
  transform-style: preserve-3d;
  animation: flip 5s infinite;
}

@keyframes flip {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}

卡片式翻页 使用transform和transition实现点击翻页：

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <!-- 正面内容 -->
    </div>
    <div class="flip-card-back">
      <!-- 背面内容 -->
    </div>
  </div>
</div>

.flip-card {
  perspective: 1000px;
  width: 300px;
  height: 200px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-back {
  transform: rotateY(180deg);
}

分页导航样式 为页码列表添加视觉效果：

.pagination {
  display: flex;
  list-style: none;
}

.pagination li {
  margin: 0 5px;
}

.pagination a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  border: 1px solid #ddd;
  color: #333;
  border-radius: 4px;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {
  background-color: #ddd;
}

书籍翻页效果 更复杂的3D翻页效果需要结合transform-origin和多个关键帧：

.book-page {
  width: 200px;
  height: 300px;
  position: absolute;
  transform-origin: left center;
  transition: transform 1s ease-in-out;
  transform-style: preserve-3d;
}

.book-page.flipping {
  transform: rotateY(-150deg);
}

实现完整翻页功能通常需要JavaScript配合处理点击事件和状态管理。CSS主要负责视觉效果，包括过渡动画、3D变换和样式美化。可以根据实际需求调整过渡时间、旋转角度和样式细节。