div+css布局卫生间挂在墙壁上的立体逼真卫生纸代码-html代码-BFW代码库

div+css布局卫生间挂在墙壁上的立体逼真卫生纸代码

代码语言：html

代码描述：div+css布局卫生间挂在墙壁上的立体逼真卫生纸代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
:root {
        --bdrs-s: 4px;
        --bdrs-l: 16px;

        --height: 10000vh;
        --width: 64vmin;

        --paper-max-height: calc(var(--width) * 5 / 6);
        --paper-min-height: var(--tube-height);
        --tube-height: calc(var(--width) / 3);
        --tube-top: calc(50vh - var(--tube-height) / 2 + 4px);
}

/* Roll */
@keyframes animate-roll {
        to {
                border-radius: var(--bdrs-s) var(--bdrs-s) 0 0;
                top: calc((100vh - var(--tube-height)) / 2);
        }
}

.roll {
        animation: animate-roll linear forwards;
        animation-timeline: scroll(root block);
        border-radius: var(--bdrs-l) var(--bdrs-l) 0 0;
        bottom: 0;
        left: 50%;
        overflow: hidden;
        position: fixed;
        top: calc((100vh - var(--paper-max-height)) / 2);
        transform: translateX(-50%);
        width: var(--width);
        z-index: 1;
}

/* Paper */
@keyframes animate-paper {
        to {
                border-radius: var(--bdrs-s);
        }

        99% {
                visibility: hidden;
        }

        100% {
                height: var(--paper-min-height);
                visibility: hidden;
        }
}

.paper {
        height: var(--paper-max-height);
        position: relative;
        width: var(--width);
}

.paper::after {
        animation: animate-paper forwards linear;
        animation-timeline: scroll(root block);
        background-color: oldlace;
        background-image: radial-gradient(rgba(0 0 0 / 0.01) 40%, transparent 40%),
                radial-gradient(rgba(0 0 0 / 0.01) 40%, transparent 40%),
                linear-gradient(
                        to bottom,
                        whitesmoke,
                        transparent 10%,
                        transparent 80%,
                        hsla(43 74.4% 49% / 0.33)
                ),
                linear-gradient(
                        to bottom,
                        whitesmoke,
                        transparent 25%,
                        transparent 65%,
                        rgba(0 0 0 / 0.2)
                ),
                linear-gradient(to bottom, rgba(0 0 0 / 0.2), transparent 5%, transparent 65%);
        background-position: 0 0, 4px 4px, 0 0, 0 0;
        background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat;
        background-size: 8px 8px, 8px 8px, contain, contain, contain;
        border-radius: var(--bdrs-l);
        content: "";
        height: var(--paper-max-height);
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 1;
}

@keyframes animate-squares {
        to {
                left: 0;
                transform: translateY(var(--tube-height));
        }
}

.paper::before {
        /* Squares */
        --square-height: calc(var(--height) / 210);

        animation: animate-squares forwards linear;
        animation-ti.........完整代码请登录后点击上方下载按钮下载查看