.bookcotainer{
    position: flex;
    height: 120vh;
    width: 100vw;
}
.book{
    top: 56%;
    left: 50%;
    width: 40%;
    height: 90%;

    position: absolute;
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: 1s;
}
.book-page-1,.book-page-8{
    background:
    radial-gradient(
        circle at bottom left,
        transparent 0,
        transparent 2em,
        beige 2em,
        beige 4em,
        transparent 4em,
        transparent 6em,
        khaki 6em,
        khaki 8em,
        transparent 8em,
        transparent 10em
    ),
    radial-gradient(
        circle at top right,
        transparent 0,
        transparent 2em,
        beige 2em,
        beige 4em,
        transparent 4em,
        transparent 6em,
        khaki 6em,
        khaki 8em,
        transparent 8em,
        transparent 10em
    ),
    radial-gradient(
        circle at top left,
        transparent 0,
        transparent 2em,
        navajowhite 2em,
        navajowhite 4em,
        transparent 4em,
        transparent 6em,
        peachpuff 6em,
        peachpuff 8em,
        transparent 8em,
        transparent 10em
    ),
    radial-gradient(
        circle at bottom right,
        transparent 0,
        transparent 2em,
        palegoldenrod 2em,
        palegoldenrod 4em,
        transparent 4em,
        transparent 6em,
        peachpuff 6em,
        peachpuff 8em,
        transparent 8em,
        transparent 10em
    ), blanchedalmond;
    
    background-blend-mode: multiply;
    background-size: 10em 10em;
    background-position: 1 3, 0 0, 5em 5em, 5em 5em;
}



.book-page-2{background-image: linear-gradient(to right, rgb(9, 9, 9) 0.3%, rgb(95, 95, 96) 1.5%, rgb(250, 226, 197) 6.2%);transition: 1s;}
.book-page-3{background-image: linear-gradient(to right, rgb(9, 9, 9) 0.3%, rgb(95, 95, 96) 1.5%, rgb(250, 226, 197) 6.2%);transition: 1s;}
.book-page-4{background-image: linear-gradient(to right, rgb(9, 9, 9) 0.3%, rgb(95, 95, 96) 1.5%, rgb(250, 226, 197) 6.2%);transition: 1s;}
.book-page-5{background-image: linear-gradient(to right, rgb(9, 9, 9) 0.3%, rgb(95, 95, 96) 1.5%, rgb(250, 226, 197) 6.2%);transition: 1s;}
.book-page-6{background-image: linear-gradient(to right, rgb(9, 9, 9) 0.3%, rgb(95, 95, 96) 1.5%, rgb(250, 226, 197) 6.2%);transition: 1s;}
.book-page-7{background-image: linear-gradient(to right, rgb(9, 9, 9) 0.3%, rgb(95, 95, 96) 1.5%, rgb(250, 226, 197) 6.2%);transition: 1s;}

.book-page-2.turn{background-image: linear-gradient(to right, rgb(9, 9, 9) 0.3%, rgb(95, 95, 96) 1.5%, rgb(250, 226, 197) 6.2%);transition: 1s;}
.book-page-3.turn{background-image: linear-gradient(to right, rgb(9, 9, 9) 0.3%, rgb(95, 95, 96) 1.5%, rgb(250, 226, 197) 6.2%);transition: 1s;}
.book-page-4.turn{background-image: linear-gradient(to right, rgb(9, 9, 9) 0.3%, rgb(95, 95, 96) 1.5%, rgb(250, 226, 197) 6.2%);transition: 1s;}
.book-page-5.turn{background-image: linear-gradient(to right, rgb(9, 9, 9) 0.3%, rgb(95, 95, 96) 1.5%, rgb(250, 226, 197) 6.2%);transition: 1s;}
.book-page-6.turn{background-image: linear-gradient(to right, rgb(9, 9, 9) 0.3%, rgb(95, 95, 96) 1.5%, rgb(250, 226, 197) 6.2%);transition: 1s;}
.book-page-7.turn{background-image: linear-gradient(to right, rgb(9, 9, 9) 0.3%, rgb(95, 95, 96) 1.5%, rgb(250, 226, 197) 6.2%);transition: 1s;}


.book-page-1,.book-page-2,.book-page-3,.book-page-4,.book-page-5,.book-page-6,.book-page-7,.book-page-8{
    /* 设置宽高 */
    width: calc(100% - var(--s)*2px);
    height: 100%;
    position: absolute;
    transform-origin: left;
    background-size: cover;
    border-right: solid 1px gray;

    transition: calc(var(--s)*.3s);
    z-index: calc(var(--s)*99);
    cursor:pointer;
}
.book-page-1,.book-page-8{
    /* outline-width: 2px;outline-style: dotted;outline-color: blue; */
    outline: solid 20px rgb(47, 54, 97);
    border-radius: 0 20px 20px 0;
}

.bp.turn{
    width: calc(100% - var(--i)*2px);
    transform: rotateY(-180deg);
    transition: calc(var(--i)*.3s);
    z-index: calc(var(--i)*99);
}
/* .book .book-page-1.turn{
    border-left: #576574 20px solid;
} */
/* .book:hover .book-page-1{
    border-left: #576574 20px solid;
}
.book:hover .book-page-1,.book:hover .book-page-2,.book:hover .book-page-3,.book:hover .book-page-4{
    transform: rotateY(-180deg);

    transition: calc(var(--i)*.6s);
    z-index: calc(var(--i)*99);
}
.book:hover{
    transform: translateX(100px);
} */
/* .book:hover{
    transform: translateX(20%);
}  */
/* 书签形状 */
.book-mark {
    border: solid 1px #010101;
    background:
        linear-gradient(135deg, #ECEDDC 25%, transparent 25%) -50px 0,
        linear-gradient(225deg, #ECEDDC 25%, transparent 25%) -50px 0,
        linear-gradient(315deg, #ECEDDC 25%, transparent 25%),
        linear-gradient(45deg, #ECEDDC 25%, transparent 25%);
    background-size: 100px 100px;
    background-color: #9136eb;
    color: #31deee;
    font-size: large;
    display: inline-block;
    position: absolute;
    width: 6%;
    top: -10%;
    height: 18%;
    cursor: pointer;
    margin-left: calc(45% + 55% *var(--i)/ 10);
    position: relative;
    transition: top 0.3s;
}
.book-mark:hover{
    top:-15%;
    transition: top 0.3s;
}

.bp .front,.bp .back{
    position: absolute;

    width: 90%;
    height: 90%;
    transition: calc(var(--s)*.3s);
}
.bp .front{
    right: 0;
    top: 5%;
    backface-visibility:hidden;
}
.bp.turn .front{
    backface-visibility:hidden;
    transform:rotateY(180deg);
    transition: calc(var(--i)*.3s);
}
.bp .back{

    transform:rotateY(180deg);
    opacity: 0;
    animation: rpage calc(var(--s)*.3s) forwards;
}
.bp.turn .back{
    left: 0;
    top: 5%;
    transition: calc(var(--i)*.3s);
    animation: tpage calc(var(--i)*.3s) forwards;
}
@keyframes tpage {
    0% {
        opacity: 0;
    }
    50%{
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}
@keyframes rpage {
    40% {
        opacity: 1;
    }
    50%{
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}