/* 预加载图片 */
        .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;
            }
        }

        .book-container {
            position: relative;
            width: 780px;
            height: 780px;
        }

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

        .book-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;
        }

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

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

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

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

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

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

        .book-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);
            }
        }