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