css实现翻书翻页loading加载动画效果代码-html代码-BFW代码库

css实现翻书翻页loading加载动画效果代码

代码语言：html

代码描述：css实现翻书翻页loading加载动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        * {
                border: 0;
                box-sizing: border-box;
                margin: 0;
                padding: 0;
        }
        :root {
                --hue: 223;
                --bg: hsl(var(--hue),10%,90%);
                --fg: hsl(var(--hue),10%,10%);
                --primary: hsl(var(--hue),90%,55%);
                --primary-l: hsl(var(--hue),90%,65%);
                --primary-d: hsl(var(--hue),90%,45%);
                --white: hsl(var(--hue),10%,100%);
                --white-d: hsl(var(--hue),10%,45%);
                font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
        }
        body {
                background-color: var(--bg);
                color: var(--fg);
                font: 1em/1.5 sans-serif;
                height: 100vh;
                display: grid;
                place-items: center;
        }
        .book,
        .book__pg-shadow,
        .book__pg {
                animation: cover 7s ease-in-out infinite;
        }
        .book {
                background-color: var(--primary-l);
                border-radius: 0.25em;
                box-shadow:
                        0 0.25em 0.5em hsla(0,0%,0%,0.3),
                        0 0 0 0.25em var(--primary) inset;
                padding: 0.25em;
                perspective: 37.5em;
                position: relative;
                width: 8em;
                height: 6em;
                transform: translate3d(0,0,0);
                transform-style: preserve-3d;
        }
        .book__pg-shadow,
        .book__pg {
                position: absolute;
                left: 0.25em;
                width: calc(50% - 0.25em);
        }
        .book__pg-shadow {
                a.........完整代码请登录后点击上方下载按钮下载查看