div+css实现玻璃杯子放铅笔尺子效果代码-html代码-BFW代码库

代码语言：html

代码描述：div+css实现玻璃杯子放铅笔尺子效果代码

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

<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        html,body {
	margin:0;
	padding:0;
	height:100%
}
body {
	background:linear-gradient(#b5d3d6 60%,#fff);
	background-repeat:no-repeat
}
.stage {
	position:absolute;
	width:400px;
	height:500px;
	left:50%;
	top:50%;
	transform:translate(-50%,-40%) scale(0.7)
}
.jar {
	position:absolute;
	opacity:.8;
	left:0;
	bottom:-30px;
	width:400px;
	height:420px;
	background:#e7e7e7;
	background-image:linear-gradient(90deg,#a8a8a8 0,#a9a9a9 12%,#aeaeae 13%,#eee 30%,#f5f5f5 70%,#d3d3d3 98%);
	border-radius:5%/60%;
	transform:perspective(20px) rotateX(-1deg);
	z-index:1
}
.jar:before {
	content:"";
	position:absolute;
	width:380px;
	height:80px;
	background:#e7e7e7;
	background-image:linear-gradient(90deg,#424242 0,#909090 10%,#a8a8a8 20%,#a8a8a8 25%,#ababab 25%,#f8f8f8 30%,#e7e7e7 32%,#e7e7e7 70%,#a8a8a8 80%,#424242 95%);
	border-radius:50%;
	z-index:5;
	left:50%;
	transform:translateX(-50%);
	box-shadow:inset 0 2px 0 0 #fbfbfb,inset 0 1px 0 0 #e6e6e6,inset 4px -20px 20px 0 rgba(0,0,0,0.2);
	top:-40px
}
.jar:after {
	content:"";
	position:absolute;
	width:380px;
	height:200px;
	background:#e7e7e7;
	border-radius:50%;
	z-index:1;
	left:50%;
	transform:translateX(-50%);
	bottom:-75px;
	box-shadow:inset 0 5px 0 0 rgba(0,0,0,0.2),inset 50px 30px 25px 0 rgba(0,0,0,0.2),inset -20px -10px 15px 0 rgba(0,0,0,0.1),0 20px 30px -10px rgba(0,0,0,0.5)
}
.jar-ring {
	border-bottom:2px solid #fff;
	box-shadow:0 10px 0 0 #fff,0 11px 1px 0 rgba(0,0,0,0.3);
	top:-4px;
	border-radius:50%;
	width:465px;
	position:absolute;
	height:120px;
	z-index:10;
	left:50%;
	transform:translateX(-50%)
}
.contains {
	position:absolute;
	width:445px;
	height:420px;
	top:-172px;
	left:50%;
	transform:translateX(-50%);
	z-index:2
}
.contains .glas {
	position:absolute;
	opacity:.5;
	left:30px;
	top:350px;
	width:380px;
	height:350px;
	background:#e7e7e7;
	background-image:linear-gradient(90deg,#a8a8a8 0,#a9a9a9 12%,#aeaeae 13%,#eee 30%,#f5f5f5 70%,#d3d3d3 98%);
	border-radius:5%/100%;
	transform:perspective(18px) rotateX(-1deg);
	z-index:1
}
.contains .glas:before {
	content:"";
	position:absolute;
	width:380px;
	height:50px;
	background:#e7e7e7;
	background-image:linear-gradient(90deg,#a8a8a8 0,#a9a9a9 12%,#aeaeae 13%,#eee 30%,#f5f5f5 70%,#d3d3d3 98%);
	z-index:1;
	left:50%;
	transform:translateX(-50%);
	top:-48px;
	clip-path:polygon(50% 60%,80% 50%,100% 0,100% 50%,100% 100%,50% 100%,2% 100%,2% 50%,2% 10%,20% 50%)
}
.contains .glas:after {
	content:"";
	position:absolute;
	width:380px;
	height:200px;
	background:#e7e7e7;
	background-image:linear-gradient(90deg,#a8a8a8 0,#a9a9a9 12%,#aeaeae 13%,#eee 30%,#f5f5f5 70%,#d3d3d3 98%);
	border-radius:50%;
	z-index:1;
	left:50%;
	transform:translateX(-50%);
	bottom:-75px;
	box-shadow:0 20px 30px -10px rgba(0,0,0,0.5)
}
.pencil {
	width:56px;
	height:454px;
	position:absolute;
	left:280px;
	top:150px;
	transform:rotate(5deg) scale(1.2)
}
.pencil div {
	position:relative
}
.pencil .eraser {
	height:35px;
	width:100%;
	background:#be7861;
	border-radius:10px 10px 0 0;
	background-image:linear-gradient(90deg,#c07963 0,#c07963 20px,#d19580 30px,#c5826d 40px,#ba7057 40px,#a44a30 50px,rgba(0,0,0,0.4) 100%);
	box-shadow:inset 0 -2px 0 0 #7b2b2c,inset 0 -3px 0 0 rgba(255,255,255,0.2)
}
.pencil .ring {
	width:100%;
	height:45px;
	background:#bbc2b2;
	background-image:linear-gradient(90deg,#7fa1a0 0,#acc0b5 11px,#fff 11px,#fff 13px,#b2c3b7 13px,#7e7962 43px,#6b6550 43px,#6b6550 45px,#7b7356 45px,#7d6d50 50px,rgba(0,0,0,0.6) 100%);
	box-shadow:inset 0 4px 0 0 #e7f3ed,inset 0 6px 0 0 #756c63,inset 0 10px 0 0 #e7f3ed,inset 0 -4px 0 0 #e7f3ed,inset 0 -6px 0 0 #756c63,inset 0 -10px 0 0 #e7f3ed
}
.pencil .body {
	position:relative;
	width:30px;
	height:300px;
	transform:translate(13px,0);
	border-radius:0 0 15px 15px;
	box-shadow:inset 0 2px 0 0 #a14504;
	background:#eda10c;
	background-image:linear-gradient(90deg,#ec9909 0,#eda10c 90%);
	z-index:2
}
.pencil .body span {
	position:absolute;
	font-size:14px;
	z-index:3;
	text-align:left;
	transform-origin:0 0;
	transform:rotate(-90deg);
	white-space:nowrap;
	height:30px;
	width:300px;
	line-height:30px;
	top:140px;
	left:1px;
	color:#a14504;
	text-shadow:-1px -1px 0 rgba(0,0,0,0.2),1px 1px 0 rgba(255,255,255,0.4)
}
.pencil .body:before,.pencil .body:after {
	position:absolute;
	content:"";
	display:block;
	height:300px;
	width:13px;
	box-shadow:inset 0 2px 0 0 #a14504,inset 2px 0 0 rgba(255,255,255,.........完整代码请登录后点击上方下载按钮下载查看