css翻页效果

翻页效果在网页设计中是一种常见的视觉效果，它可以让页面切换显得更加生动有趣，CSS翻页效果主要是通过CSS3中的动画和变换属性来实现，下面，我将详细为大家介绍如何使用CSS实现翻页效果。

我们需要创建一个HTML结构，用来展示翻页效果，这里以一个简单的例子为例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>翻页效果</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="book">
        <div class="page" id="page1">第一页内容</div>
        <div class="page" id="page2">第二页内容</div>
    </div>
</body>
</html>

我们来编写CSS代码，实现翻页效果。

1、基础样式设置

我们需要为页面设置一些基础样式：

body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}
.book {
    width: 300px;
    height: 400px;
    position: relative;
    perspective: 1000px;
}
.page {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    transform-style: preserve-3d;
    transition: transform 1s;
}

2、实现翻页动画

我们需要为翻页添加动画效果，这里我们使用CSS3的@keyframes关键帧动画：

@keyframes flip {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(180deg);
    }
}
#page2 {
    transform: rotateY(180deg);
}
.book:hover .page {
    animation: flip 1s forwards;
}

在上面的代码中，我们定义了一个名为flip的关键帧动画，将页面从0度旋转到180度，模拟翻页效果，我们将第二个页面的初始状态设置为旋转180度，使其背对用户，当鼠标悬停在.book元素上时，触发动画，使两个页面同时旋转，实现翻页效果。

3、完善细节

为了使翻页效果更加真实，我们可以为页面添加一些阴影效果：

.page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    transform: rotateY(180deg);
    backface-visibility: hidden;
}

css翻页效果

在上面的代码中，我们为每个页面添加了一个伪元素，用来模拟翻页时产生的阴影效果，通过设置backface-visibility: hidden;属性，使阴影只在翻页时显示。

4、添加交互

我们可以为翻页效果添加一些交互，如点击按钮切换页面：

<button id="prev">上一页</button>
<button id="next">下一页</button>

#prev, #next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}
#prev {
    left: 0;
}
#next {
    right: 0;
}

document.getElementById('prev').addEventListener('click', function() {
    document.getElementById('page1').style.transform = 'rotateY(0deg)';
    document.getElementById('page2').style.transform = 'rotateY(180deg)';
});
document.getElementById('next').addEventListener('click', function() {
    document.getElementById('page1').style.transform = 'rotateY(180deg)';
    document.getElementById('page2').style.transform = 'rotateY(0deg)';
});

css翻页效果