css实现翻页

未可知。

已于 2023-05-06 14:43:49 修改

阅读量2.2k

点赞数

分类专栏： CSS 文章标签： css css3 动画

于 2023-05-06 00:53:18 首次发布

本文链接：https://blog.csdn.net/weixin_52099241/article/details/130517639

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

该示例展示了如何利用CSS3的animation属性和transform-style属性实现书本翻页效果。通过设置关键帧、旋转角度、旋转中心、持续时间和播放次数等参数，以及backface-visibility隐藏翻转后的背面，创建了逼真的3D翻页动画。

摘要由CSDN通过智能技术生成

我们可以使用css3的animation属性来创建翻页动画，
需要设置关键帧，旋转角度，旋转中心，持续时间，播放次数等参数。
还可以使用transform-style: preserve-3d;来保持3D效果，以及backface-visibility: hidden;来隐藏翻转后的背面。

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <style>
        /* 书本容器 */
        #book-container {
            width: 400px;
            height: 600px;
            margin: 50px auto;
            position: relative;
            perspective: 1000px;
        }

        /* 书页样式 */
        .book-page {
            width: 100%;
            height: 100%;
            position: absolute;
            transform-style: preserve-3d;
        }

        /* 反面样式 */
        .book-page-back {
            width: 100%;
            height: 100%;
            position: absolute;
            /* 设置反面的背景颜色为灰色 */
            background-color: gray;
            opacity: 0.4;
            transform: rotateY(180deg);
        }

        /* 正面样式 */
        .book-page-front {
            width: 100%;
            height: 100%;
            position: absolute;
            /* 设置正面的背景颜色黄色 */
            opacity: 0.8;
            background-color: yellow;
        }

        /* 设置第一页的正面的背景颜色为浅蓝色 */
        #book-container .book-page:nth-child(1) .book-page-front {
            background-color: lightblue;
        }

        /* 设置第二页的正面的背景颜色为浅绿色 */
        #book-container .book-page:nth-child(2) .book-page-front {
            background-color: lightgreen;
        }



        /* 翻页动画 */
        @keyframes turn {
            from {
                transform: rotateY(0deg);
            }

            to {
                transform: rotateY(-180deg);
            }
        }

        /* 鼠标悬停时触发动画 */
        #book-container:hover .book-page {
            animation-name: turn;
            animation-duration: 2s;
            /* 设置动画保持最后一帧的样式 */
            animation-fill-mode: forwards;
        }

        /* 设置旋转中心为左边缘 */
        #book-container .book-page:nth-child(1) {
            transform-origin: left center;
        }

        /* 设置旋转中心为右边缘 */
        #book-container .book-page:nth-child(2) {
            transform-origin: right center;
        }

      
    </style>
</head>

<body>

    <!-- 书本容器 -->
    <div id="book-container">
        <!-- 第一页 -->
        <div class="book-page">
            <!-- 正面 -->
            <div class="book-page-front">
                <p> Hello啊啦啦啦啦啦</p>
                <p> Hello啊啦啦啦啦啦</p>
                <p> Hello啊啦啦啦啦啦</p>
                <p> Hello啊啦啦啦啦啦</p>
                <p> Hello啊啦啦啦啦啦</p>
                <p> Hello啊啦啦啦啦啦</p>
                <p> Hello啊啦啦啦啦啦</p>
                <p> Hello啊啦啦啦啦啦</p>
                <p> Hello啊啦啦啦啦啦</p>
            </div>
            <!-- 反面 -->
            <div class="book-page-back">
                <p>World宝贝宝贝在不在</p>
                <p>World宝贝宝贝在不在</p>
                <p>World宝贝宝贝在不在</p>
                <p>World宝贝宝贝在不在</p>
                <p>World宝贝宝贝在不在</p>
                <p>World宝贝宝贝在不在</p>
                <p>World宝贝宝贝在不在</p>
                <p>World宝贝宝贝在不在</p>
                <p>World宝贝宝贝在不在</p>
                <p>World宝贝宝贝在不在</p>
            </div>
        </div>
        <!-- 第二页 -->
        <div class="book-page">
            <!-- 正面 -->
            <div class="book-page-front">
                <p> 正面213456789 正面213456789</p>
                <p> 正面213456789 正面213456789</p>
                <p> 正面213456789 正面213456789</p>
                <p> 正面213456789 正面213456789</p>
                <p> 正面213456789 正面213456789</p>
                <p> 正面213456789 正面213456789</p>
                <p> 正面213456789 正面213456789</p>
                <p> 正面213456789 正面213456789</p>
                <p> 正面213456789 正面213456789</p>
            </div>
            <!-- 反面 -->
            <div class="book-page-back">
                <p>反面988765431</p>
                <p>反面988765431</p>
                <p>反面988765431</p>
                <p>反面988765431</p>
                <p>反面988765431</p>
                <p>反面988765431</p>
                <p>反面988765431</p>
                <p>反面988765431</p>
                <p>反面988765431</p>
                <p>反面988765431</p>
            </div>
        </div>
    </div>
</body>

</html>

在这里插入图片描述

给正面和反面都设置了不同的透明度，这意味着它们都会显示一定比例的颜色。但是第一页的正面和第二页的反面是重叠在一起的，所以它们的颜色会混合在一起，变成一个中间色。第二页的正面和第一页的反面是分开的，所以它们的颜色不会混合，但是它们都会被白色的背景遮挡，所以看不到，可以自己调一下透明度，就能更直观的看到书页的正反