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-timeline: scroll(root block);
	background-image: radial-gradient(rgba(0 0 0 / 0.02) 50%, transparent 50%),
		radial-gradient(rgba(0 0 0 / 0.02) 50%, transparent 50%),
		repeating-linear-gradient(
			to bottom,
			oldlace var(--square-height),
			oldlace calc(var(--square-height) + 2px),
			floralwhite calc(var(--square-height) + 2px),
			floralwhite calc(var(--square-height) * 2)
		);
	background-position: 0 0, 4px 4px, 0 0;
	background-repeat: repeat, repeat, no-repeat;
	background-size: 8px 8px, 8px 8px, contain;
	box-shadow: 0px 0.3px 1.3px rgba(0, 0, 0, 0.125),
		0px 2px 10px rgba(0, 0, 0, 0.125);
	content: "";
	height: var(--height);
	left: -0.375rem;
	position: absolute;
	transform: translateY(calc(-100% + var(--tube-height)));
	width: 100%;
	z-index: 2;
}

/* Tube */
@keyframes animate-tube {
	to {
		top: 0;
	}

	90% {
		background-position: 5px 5px, 0 0, 100%, 0;
	}

	100% {
		background-position: 5px 5px, 0 0, 0%, 0;
	}
}

.tube {
	animation: animate-tube forwards linear;
	animation-timeline: scroll(root block);
	background-image: radial-gradient(peru 10%, transparent 10%),
		radial-gradient(peru 10%, transparent 10%),
		rep.........完整代码请登录后点击上方下载按钮下载查看