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(-.........完整代码请登录后点击上方下载按钮下载查看