使用CSS实现简单的翻页效果

发布时间：2024-03-06 15:17:13 作者：RGF

这篇文章主要为大家详细介绍了如何使用CSS实现简单的翻页效果，文中的示例代码讲解详细，具有一定的借鉴价值，有需要的小伙伴可以跟随小编一起学习一下

基本原理

我们先来看一下翻页的过程动图，如下：

观察动图，大致将此翻页过程分为三个状态，书页未翻开、书页翻动中、书页翻动完成，对应的是“图翻页过程”。可以看出，翻页过程中，第二页是压在第一页上的，随着旋转角度增加，覆盖面积逐渐增大，翻页完成时，第二页完全覆盖第一页，据此画出两页的状态，如图“图翻页简析”。

到此，可以用代码先把项目的树形结构先写出来

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS实现翻页效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            display: flex;
            min-height: 100vh;
        }
        h1 {
            position: absolute;
            top: 20px;
            left: 0;
            width: 100%;
            font-size: 36px;
            text-align: center;
            margin-top: 100px;
        }
        article {
            position: relative;
            width: 300px;
            height: 400px;
            padding: 40px 80px 40px 380px;
            background-color: bisque;
            margin: auto;
        }
        .book {
            background-color: cornflowerblue;
            position: relative;
        }
        .pageItem {
            position: absolute;
            width: 300px;
            height: 400px;
            font-size: 32px;
            line-height: 400px;
            text-align: center;
            background-color: #fda3a3;
        }
        .front {
            background-color: #fac8bf;
            z-index: 10;
        }
        .back {
            background-color: #a990d2;
            z-index: 10;
        }
    </style>
</head>
<body>
    <h1>CSS实现翻页效果</h1>
    <article>
        <div class="book">
            <div class="pageItem front">Page 1</div>
            <div class="pageItem back">Page 2</div>
            <div class="pageItem">Page 3</div>
        </div>
    </article>
</body>
</html>

代码实现

观察“图翻页简析”得出page2旋转，page1保持不动，即可基本模拟出翻页效果，运用css的动画效果可以实现page2的连续旋转，而动画的初始状态对应的是“图翻页简析”的①，结束状态则对应③，接下来需要确定的是旋转中心点以及旋转轴，旋转中心点可以是不断变化的，但为了方便，我们取一固定旋转中心点就好，“图翻页简析”中三条辅助线的相交点大致在左下方，可以确定旋转中心点的位置范围。以代码图形大小为基准，画出对应的坐标系以及旋转中心点，如“图旋转示意图”：

在上图中，旋转中心点为点A，旋转轴为线AB，另外，初始旋转角度即∠DAB的大小，记∠ACD为角c，∠DAB=2∠DAC=2(90-∠ACD)=180-2c，由tanc=AD/CD,求出c≈33.7,可得∠DAB=112.6。

修改代码，为page2添加旋转动画：

    .back {
        //...
        left: -300px;
        transform-origin:300px 600px;
        transform: rotate(112.6deg);
        transition: 1s;
    }
    article:hover .back{
        transform: rotate(0deg);
    }

考虑到翻页是折角，相当于page1隐藏折角，而page2只显示这一部分折角，page1和page2显示隐藏的划分是线AC，在线AC左边显示，右边隐藏，翻页过程中，线AC也是在旋转的。要实现部分显示功能，css中的overflow:hidden不就可以。想象一下，一个以线AC为边线的盒子套上page1和page2,使得盒子内的内容显示，盒子外则隐藏，那不就能达到我们想要的效果了吗？当然，此父盒子也是要同步旋转的，但是，由于盒子内的元素也会和盒子旋转相同的角度，那我们原定的旋转角度就会因此发生偏移，如下图①：

如上图所示，添加父盒子，设定父盒子的旋转中心点同是点A。偏移的角度即上图③中父盒子的旋转角度，该角和角c为内错角，因此该旋转角度为33.7°。page1和page2只要朝反方向旋转相同的角度就能回复原本位置。编写代码时按照上图步骤一步步进行调整，最终添加父盒子后的代码为：

<style>
        .rotateBox {
            position: absolute;
            z-index: 10;
            width: 800px;
            height: 800px;
            bottom: -600px;
            transform-origin: 0px 800px;
            /* border: 4px dashed #b0b0b0; */
            transform: rotate(-33.7deg);
            transition: 1s;
            overflow: hidden;
        }
        .front {
            //...
            //- z-index: 10;
            bottom: 200px;
            transform-origin: 0 600px;
            transform: rotate(33.7deg);
            transition: 1s;
        }
        .back {
            //...
            //- z-index: 10;
            //- transform-origin:300px 600px;
            //- transform: rotate(112.6deg);
            transform-origin: 300px 600px;
            transform: rotate(146.3deg);
            bottom: 200px;
        }
        article:hover .rotateBox {
            transform: rotate(-90deg);
        }
        article:hover .front {
            transform: rotate(90deg);
        }
        article:hover .back {
            //- transform: rotate(0deg);
            transform: rotate(90deg);
        }
</style>

页面美化

最后，为了使效果更为逼真，添加相应的阴影，替换图片进行美化。

最终代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS实现翻页效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            display: flex;
            min-height: 100vh;
        }
        h1 {
            position: absolute;
            top: 20px;
            left: 0;
            width: 100%;
            font-size: 36px;
            text-align: center;
            margin-top: 100px;
        }
        article {
            position: relative;
            width: 300px;
            height: 400px;
            padding: 40px 80px 40px 380px;
            margin: auto;
            box-shadow: 2px 3px 5px 6px #3f1300;
            background-image: url(https://cdn.pixabay.com/photo/2016/12/18/09/05/trees-1915245_1280.jpg);
        }
        .book {
            background-color: cornflowerblue;
            position: relative;
        }
        .rotateBox {
            position: absolute;
            z-index: 10;
            width: 800px;
            height: 800px;
            bottom: -600px;
            transform-origin: 0px 800px;
            /* border: 4px dashed #b0b0b0; */
            transform: rotate(-33.7deg);
            transition: 1s;
            overflow: hidden;
        }
        .pageItem {
            position: absolute;
            width: 300px;
            height: 400px;
            font-size: 32px;
            text-align: center;
            box-shadow: 0 0 11px rgba(0, 0, 0, .5);
        }
        .front {
            bottom: 200px;
            transform-origin: 0 600px;
            transform: rotate(33.7deg);
            transition: 1s;
        }
        .back {
            left: -300px;
            transform-origin: 300px 600px;
            transform: rotate(146.3deg);
            transition: 1s;
            bottom: 200px;
        }
        figure img {
            width: 100%;
            height: 100%;
            aspect-ratio: 3/4;
            object-fit: cover;
        }
        figure figcaption {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-wrap: nowrap;
            color: #fff;
            background-color: rgba(255, 255, 255, .5);
            padding: 1em;
            border: 4px double #fff;
        }
        article:hover .rotateBox {
            transform: rotate(-90deg);
        }
        article:hover .front {
            transform: rotate(90deg);
        }
        article:hover .back {
            transform: rotate(90deg);
        }
    </style>
</head>
<body>
    <h1>CSS实现翻页效果</h1>
    <article>
        <div class="book">
            <div class="rotateBox">
                <div class="pageItem front">
                    <figure>
                        <img src="https://cdn.pixabay.com/photo/2023/11/22/18/13/beach-8406104_640.jpg" alt="">
                        <figcaption>Page 1</figcaption>
                    </figure>
                </div>
                <div class="pageItem back">
                    <figure>
                        <img src="https://cdn.pixabay.com/photo/2023/07/07/15/51/sea-8112910_640.jpg" alt="">
                        <figcaption>Page 2</figcaption>
                    </figure>
                </div>
            </div>
            <div class="pageItem">
                <figure>
                    <img src="https://cdn.pixabay.com/photo/2021/11/26/17/26/dubai-desert-safari-6826298_640.jpg"
                        alt="">
                    <figcaption>Page 3</figcaption>
                </figure>
            </div>
        </div>
    </article>
</body>
</html>

小小改动

想要让页面初始状态有个小小的折角，只要设置初始角度>33.7°，以45°为例，需要修改上述代码如下：

<style>
    .rotateBox {
        //...
        //- transform: rotate(-33.7deg);
        transform: rotate(-45deg);
    }
    .front {
        //...
        //- transform: rotate(33.7deg);
        transform: rotate(45deg);
    }
    .back {
        //...
        //- transform: rotate(146.3deg);
        transform: rotate(135deg);
    }
</style>

以上就是使用CSS实现简单的翻页效果的详细内容，更多关于CSS翻页的资料请关注脚本之家其它相关文章！

Tag：css 翻页

CSS3 实现文本与图片横向无限滚动动画效果
这篇文章主要介绍了CSS3 实现文本与图片横向无限滚动动画,本文通过示例代码给大家介绍的非常详细，感兴趣的朋友跟随小编一起看看吧
2024-06-12
CSS实现苹果官网文字渐入效果(示例代码)
这篇文章主要介绍了CSS实现苹果官网文字渐入效果(示例代码),文字是从左到有慢慢呈现出来，不是整体消失和出现，那么肯定不能使用透明度，结合示例代码讲解的非常详细，需要
2024-06-12
CSS实现鼠标悬停图片放大的多种方法
这篇文章主要介绍了CSS实现鼠标悬停图片放大的几种方法,使用css设置背景图片大小100%，同时设置位置和过渡效果，然后使用：hover设置当鼠标悬停时修改图片大小，实现悬停放
2024-05-29
css3实现类似地图定位循环扩散光圈效果(最新推荐)
这篇文章主要介绍了css3实现类似地图定位循环扩散光圈效果,本文通过实例代码给大家介绍的非常详细，感兴趣的朋友跟随小编一起看看吧
2024-05-24
CSS鼠标悬浮动画-hover属性详解
这篇文章主要介绍了CSS鼠标悬浮动画-hover属性详解，本文通过实例代码给大家介绍的非常详细，感兴趣的朋友跟随小编一起看看吧
2024-05-24
CSS的Flexbox布局示例详解
CSS Flexible Box Module是一种现代化的布局模式，用于创建响应式的一维布局（无论是水平还是垂直），下面给大家介绍Flexbox布局的一些关键概念和示例代码，感兴趣的朋友一
2024-05-16
CSS中去掉li前面的圆点方法(常见方法汇总)
在网页开发中，我们经常会使用无序列表（<ul>）来展示一系列的项目,默认情况下，每个列表项（<li>）前面都会有一个圆点作为标记，本文将介绍几种常见的方法来
2024-05-16
CSS实现dom脱离文档流定位固定位置的操作代码
在CSS中，要使一个DOM元素脱离正常的文档流并定位在页面的右顶部，你可以使用position属性，这篇文章主要介绍了CSS实现dom脱离文档流定位固定位置,需要的朋友可以参考下
2024-04-30
stylus入门使用方法示例详解
Stylus 是一个功能强大的 CSS 预处理器，能够让你的样式表开发变得更加高效和有趣，本文介绍stylus入门使用方法，感兴趣的朋友跟随小编一起看看吧
2024-04-22
CSS中五种常见定位方式详解
这篇文章主要为大家详细介绍了CSS中五种常见定位方式以及它们的具体应用，文中的示例代码讲解详细，具有一定的借鉴价值，感兴趣的小伙伴可以跟小编一起学习一下
2024-04-22

使用CSS实现简单的翻页效果

基本原理

代码实现

页面美化

小小改动

相关文章

最新评论

文章分类

大家感兴趣的内容

最近更新的内容