HTML翻书特效

最新推荐文章于 2025-05-05 12:33:46 发布
岸风毕设
最新推荐文章于 2025-05-05 12:33:46 发布
阅读量506
点赞数 3
文章标签： html css css3
本文链接：https://blog.youkuaiyun.com/weixin_44789995/article/details/145554369
版权
1.截图效果

在这里插入图片描述
2.上代码

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

<head>
    <meta charset="UTF-8">
    <meta name="Author" content="只会切图的前端">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html+css制作翻书特效</title>
</head>

<body>
    <div class="imgLoader"></div>
    <div class="container">
        <div class="book">
            <div class="gap"></div>
            <!-- 底图 -->
            <div class="pages">
                <div class="page"></div>
                <div class="page"></div>
                <div class="page"></div>
                <div class="page"></div>
                <div class="page"></div>
                <div class="page"></div>
            </div>
            <!-- 切片 -->
            <div class="flips">
                <div class="flip flip1">
                    <div class="flip flip2">
                        <div class="flip flip3">
                            <div class="flip flip4">
                                <div class="flip flip5">
                                    <div class="flip flip6">
                                        <div class="flip flip7"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body,
        html {
            width: 100%;
            height: 100%;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
            background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
        }

        /* 预加载图片 */
        .imgLoader {
            position: fixed;
            animation: preLoad 1s steps(1);
            width: 0;
            height: 0;
        }

        @keyframes preLoad {
            0% {
                background-image: url("./img/1.jpg");
            }

            10% {
                background-image: url("./img/2.jpg");
            }

            20% {
                background-image: url("./img/3.webp");
            }

            30% {
                background-image: url("./img/4.webp");
            }

            40% {
                background-image: url("./img/5.webp");
            }

            100% {
                display: none;
            }
        }

        .container {
            position: relative;
            width: 520px;
            height: 520px;
        }

        .book {
            position: relative;
            perspective: 630px;
            perspective-origin: center 50px;
            transform: scale(1.2);
            filter: drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.25));
        }

        .page {
            width: 210px;
            height: 300px;
            background-color: #f5f5f5;
            position: absolute;
            top: 0px;
            right: 50%;
            transform-origin: 100% 100%;
            border: solid #ddd 1px;
            background-size: 420px 300px;
            background-position: center;
            transform-style: preserve-3d;
        }

        .page:nth-child(1) {
            transform: rotateX(60deg) rotateY(3deg);
        }

        .page:nth-child(2) {
            transform: rotateX(60deg) rotateY(4.5deg);
        }

        .page:nth-child(3) {
            transform: rotateX(60deg) rotateY(6deg);
            animation: nextPage 25s infinite -24s steps(1);
            background-size: 420px 300px;
            background-position: -2px -2px;
        }

        .page:nth-child(4) {
            transform: rotateX(60deg) rotateY(177deg);
        }

        .page:nth-child(5) {
            transform: rotateX(60deg) rotateY(175.5deg);
        }

        .page:nth-child(6) {
            transform: rotateX(60deg) rotateY(174deg);
            overflow: hidden;
        }

        .page:nth-child(6)::after {
            content: "";
            width: 210px;
            height: 300px;
            position: absolute;
            top: 0px;
            right: 0%;
            transform-origin: center;
            transform: rotateY(180deg);
            animation: nextPage 25s -20s infinite steps(1);
            background-size: 420px 300px;
            background-position: 100% -2px;
        }

        @keyframes nextPage {
            0% {
                background-image: url("./img/1.jpg");
            }

            20% {
                background-image: url("./img/2.jpg");
            }

            40% {
                background-image: url("./img/3.webp");
            }

            60% {
                background-image: url("./img/4.webp");
            }

            80% {
                background-image: url("./img/5.webp");
            }
        }

        .gap {
            width: 10px;
            height: 300px;
            background: none;
            transform: rotateX(60deg);
            transform-origin: bottom;
            position: absolute;
            top: 0px;
            left: calc(50% - 5px);
        }

        .gap::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translate(-50%, 50%);
            background-color: #555;
            width: 10px;
            height: 5px;
            border-radius: 50%;
        }

        .pages,
        .flips {
            transform-style: preserve-3d;
        }

        .flip {
            width: 32px;
            height: 300px;
            position: absolute;
            top: 0px;
            transform-origin: 100% 100%;
            right: 100%;
            border: solid #ddd;
            border-width: 1px 0px;
            perspective: 4200px;
            perspective-origin: center;
            transform-style: preserve-3d;
            background-size: 420px 300px;
        }

        .flip::after {
            content: "";
            position: absolute;
            top: 0px;
            right: 0%;
            width: 100%;
            height: 100%;
            transform-origin: center;
            background-size: 420px 300px;
        }

        .flip.flip1 {
            right: 50%;
            animation: flip1 5s infinite ease-in-out;
            border-width: 2px 2px 2px 0;
        }

        .flip.flip1::after {
            animation: nextFlip1 25s -20s infinite steps(1);
        }

        .flip:not(.flip1) {
            right: calc(100% - 2px);
            top: -2px;
            transform-origin: right;
            animation: flip2 5s ease-in-out infinite;
        }

        .flip.flip2::after {
            animation: nextFlip2 25s -20s infinite steps(1);
        }

        .flip.flip3::after {
            animation: nextFlip3 25s -20s infinite steps(1);
        }

        .flip.flip4::after {
            animation: nextFlip4 25s -20s infinite steps(1);
        }

        .flip.flip5::after {
            animation: nextFlip5 25s -20s infinite steps(1);
        }

        .flip.flip6::after {
            animation: nextFlip6 25s -20s infinite steps(1);
        }

        .flip.flip7::after {
            animation: nextFlip7 25s -20s infinite steps(1);
        }

        .flip.flip7 {
            width: 30px;
            border-width: 2px 0px 2px 2px;
        }

        .flip.flip7::after {
            animation: nextFlip7 25s -20s infinite steps(1);
        }

        @keyframes flip1 {

            0%,
            20% {
                transform: rotateX(60deg) rotateY(6deg);
            }

            80%,
            100% {
                transform: rotateX(60deg) rotateY(174deg);
            }
        }

        @keyframes flip2 {

            0%,
            20% {
                transform: rotateY(0deg) translateY(0px);
            }

            50% {
                transform: rotateY(-15deg) translateY(0px);
            }
        }

        @keyframes nextFlip1 {
            0% {
                background-image: url("./img/1.jpg");
                background-position: -178px -2px;
                transform: rotateY(0deg);
            }

            10% {
                background-image: url("./img/2.jpg");
                background-position: -210px -2px;
                transform: rotateY(180deg);
            }

            20% {
                background-image: url("./img/2.jpg");
                background-position: -178px -2px;
                transform: rotateY(0deg);
            }

            30% {
                background-image: url("./img/3.webp");
                background-position: -210px -2px;
                transform: rotateY(180deg);
            }

            40% {
                background-image: url("./img/3.webp");
                background-position: -178px -2px;
                transform: rotateY(0deg);
            }

            50% {
                background-image: url("./img/4.webp");
                background-position: -210px -2px;
                transform: rotateY(180deg);
            }

            60% {
                background-image: url("./img/4.webp");
                background-position: -178px -2px;
                transform: rotateY(0deg);
            }

            70% {
                background-image: url("./img/5.webp");
                background-position: -210px -2px;
                transform: rotateY(180deg);
            }

            80% {
                background-image: url("./img/5.webp");
                background-position: -178px -2px;
                transform: rotateY(0deg);
            }

            90% {
                background-image: url("./img/1.jpg");
                background-position: -210px -2px;
                transform: rotateY(180deg);
            }
        }

        @keyframes nextFlip2 {
            0% {
                background-image: url("./img/1.jpg");
                background-position: -148px -2px;
                transform: rotateY(0deg);
            }

            10.5% {
                background-image: url("./img/2.jpg");
                background-position: -238px -2px;
                transform: rotateY(180deg);
            }

            20% {
                background-image: url("./img/2.jpg");
                background-position: -148px -2px;
                transform: rotateY(0deg);
            }

            30.5% {
                background-image: url("./img/3.webp");
                background-position: -238px -2px;
                transform: rotateY(180deg);
            }

            40% {
                background-image: url("./img/3.webp");
                background-position: -148px -2px;
                transform: rotateY(0deg);
            }

            50.5% {
                background-image: url("./img/4.webp");
                background-position: -238px -2px;
                transform: rotateY(180deg);
            }

            60% {
                background-image: url("./img/4.webp");
                background-position: -148px -2px;
                transform: rotateY(0deg);
            }

            70.5% {
                background-image: url("./img/5.webp");
                background-position: -238px -2px;
                transform: rotateY(180deg);
            }

            80% {
                background-image: url("./img/5.webp");
                background-position: -148px -2px;
                transform: rotateY(0deg);
            }

            90.5% {
                background-image: url("./img/1.jpg");
                background-position: -238px -2px;
                transform: rotateY(180deg);
            }
        }

        @keyframes nextFlip3 {
            0% {
                background-image: url("./img/1.jpg");
                background-position: -118px -2px;
                transform: rotateY(0deg);
            }

            11% {
                background-image: url("./img/2.jpg");
                background-position: -268px -2px;
                transform: rotateY(180deg);
            }

            20% {
                background-image: url("./img/2.jpg");
                background-position: -118px -2px;
                transform: rotateY(0deg);
            }

            31% {
                background-image: url("./img/3.webp");
                background-position: -268px -2px;
                transform: rotateY(180deg);
            }

            40% {
                background-image: url("./img/3.webp");
                background-position: -118px -2px;
                transform: rotateY(0deg);
            }

            51% {
                background-image: url("./img/4.webp");
                background-position: -268px -2px;
                transform: rotateY(180deg);
            }

            60% {
                background-image: url("./img/4.webp");
                background-position: -118px -2px;
                transform: rotateY(0deg);
            }

            71% {
                background-image: url("./img/5.webp");
                background-position: -268px -2px;
                transform: rotateY(180deg);
            }

            80% {
                background-image: url("./img/5.webp");
                background-position: -118px -2px;
                transform: rotateY(0deg);
            }

            91% {
                background-image: url("./img/1.jpg");
                background-position: -268px -2px;
                transform: rotateY(180deg);
            }
        }

        @keyframes nextFlip4 {
            0% {
                background-image: url("./img/1.jpg");
                background-position: -88px -2px;
                transform: rotateY(0deg);
            }

            11.5% {
                background-image: url("./img/2.jpg");
                background-position: -298px -2px;
                transform: rotateY(180deg);
            }

            20% {
                background-image: url("./img/2.jpg");
                background-position: -88px -2px;
                transform: rotateY(0deg);
            }

            31.5% {
                background-image: url("./img/3.webp");
                background-position: -298px -2px;
                transform: rotateY(180deg);
            }

            40% {
                background-image: url("./img/3.webp");
                background-position: -88px -2px;
                transform: rotateY(0deg);
            }

            51.5% {
                background-image: url("./img/4.webp");
                background-position: -298px -2px;
                transform: rotateY(180deg);
            }

            60% {
                background-image: url("./img/4.webp");
                background-position: -88px -2px;
                transform: rotateY(0deg);
            }

            71.5% {
                background-image: url("./img/5.webp");
                background-position: -298px -2px;
                transform: rotateY(180deg);
            }

            80% {
                background-image: url("./img/5.webp");
                background-position: -88px -2px;
                transform: rotateY(0deg);
            }

            91.5% {
                background-image: url("./img/1.jpg");
                background-position: -298px -2px;
                transform: rotateY(180deg);
            }
        }

        @keyframes nextFlip5 {
            0% {
                background-image: url("./img/1.jpg");
                background-position: -58px -2px;
                transform: rotateY(0deg);
            }

            12% {
                background-image: url("./img/2.jpg");
                background-position: -328px -2px;
                transform: rotateY(180deg);
            }

            20% {
                background-image: url("./img/2.jpg");
                background-position: -58px -2px;
                transform: rotateY(0deg);
            }

            32% {
                background-image: url("./img/3.webp");
                background-position: -328px -2px;
                transform: rotateY(180deg);
            }

            40% {
                background-image: url("./img/3.webp");
                background-position: -58px -2px;
                transform: rotateY(0deg);
            }

            52% {
                background-image: url("./img/4.webp");
                background-position: -328px -2px;
                transform: rotateY(180deg);
            }

            60% {
                background-image: url("./img/4.webp");
                background-position: -58px -2px;
                transform: rotateY(0deg);
            }

            72% {
                background-image: url("./img/5.webp");
                background-position: -328px -2px;
                transform: rotateY(180deg);
            }

            80% {
                background-image: url("./img/5.webp");
                background-position: -58px -2px;
                transform: rotateY(0deg);
            }

            92% {
                background-image: url("./img/1.jpg");
                background-position: -328px -2px;
                transform: rotateY(180deg);
            }
        }

        @keyframes nextFlip6 {
            0% {
                background-image: url("./img/1.jpg");
                background-position: -28px -2px;
                transform: rotateY(0deg);
            }

            12.5% {
                background-image: url("./img/2.jpg");
                background-position: -358px -2px;
                transform: rotateY(180deg);
            }

            20% {
                background-image: url("./img/2.jpg");
                background-position: -28px -2px;
                transform: rotateY(0deg);
            }

            32.5% {
                background-image: url("./img/3.webp");
                background-position: -358px -2px;
                transform: rotateY(180deg);
            }

            40% {
                background-image: url("./img/3.webp");
                background-position: -28px -2px;
                transform: rotateY(0deg);
            }

            52.5% {
                background-image: url("./img/4.webp");
                background-position: -358px -2px;
                transform: rotateY(180deg);
            }

            60% {
                background-image: url("./img/4.webp");
                background-position: -28px -2px;
                transform: rotateY(0deg);
            }

            72.5% {
                background-image: url("./img/5.webp");
                background-position: -358px -2px;
                transform: rotateY(180deg);
            }

            80% {
                background-image: url("./img/5.webp");
                background-position: -28px -2px;
                transform: rotateY(0deg);
            }

            92.5% {
                background-image: url("./img/1.jpg");
                background-position: -358px -2px;
                transform: rotateY(180deg);
            }
        }

        @keyframes nextFlip7 {
            0% {
                background-image: url("./img/1.jpg");
                background-position: -2px -2px;
                transform: rotateY(0deg);
            }

            13% {
                background-image: url("./img/2.jpg");
                background-position: -388px -2px;
                transform: rotateY(180deg);
            }

            20% {
                background-image: url("./img/2.jpg");
                background-position: -2px -2px;
                transform: rotateY(0deg);
            }

            33% {
                background-image: url("./img/3.webp");
                background-position: -388px -2px;
                transform: rotateY(180deg);
            }

            40% {
                background-image: url("./img/3.webp");
                background-position: -2px -2px;
                transform: rotateY(0deg);
            }

            53% {
                background-image: url("./img/4.webp");
                background-position: -388px -2px;
                transform: rotateY(180deg);
            }

            60% {
                background-image: url("./img/4.webp");
                background-position: -2px -2px;
                transform: rotateY(0deg);
            }

            73% {
                background-image: url("./img/5.webp");
                background-position: -388px -2px;
                transform: rotateY(180deg);
            }

            80% {
                background-image: url("./img/5.webp");
                background-position: -2px -2px;
                transform: rotateY(0deg);
            }

            93% {
                background-image: url("./img/1.jpg");
                background-position: -388px -2px;
                transform: rotateY(180deg);
            }
        }
    </style>
</body>

</html>