css实现咖啡机效果代码-html代码-BFW代码库

css实现咖啡机效果代码

代码语言：html

代码描述：css实现咖啡机效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        *,*:before,*:after {
	box-sizing:border-box
}
html,body {
	height:100%
}
body {
	display:flex;
	justify-content:center;
	align-items:center;
	background:#34495c
}
.machine {
	position:relative;
	width:191px;
	height:311px;
	-webkit-box-reflect:below 0 -webkit-linear-gradient(bottom,rgba(255,255,255,0.4) 0,transparent 50%,transparent 100%);
	transform:scale(0.75)
}
.machine-top {
	position:absolute;
	left:50%;
	top:10px;
	transform:translateX(-50%);
	width:119px;
	height:164px;
	background:linear-gradient(#00bc9e,#00bc9e 20%,#008e77 20%,#008e77 22%,#00bc9e 22%,#00bc9e 62%,#008e77 62%,#008e77 64%,#00bc9e 64%);
	border-top-right-radius:20px;
	border-top-left-radius:20px
}
.machine-top:before {
	content:"";
	position:absolute;
	left:50%;
	top:-10px;
	transform:translateX(-50%);
	width:45px;
	height:10px;
	background:linear-gradient(to right,#008e77 15%,#40aa99 15%,#40aa99 45%,#008e77 45%,#008e77 85%,#00806b 85%,#00806b);
	border-top-right-radius:2px;
	border-top-left-radius:2px
}
.machine-top:after {
	content:"";
	position:absolute;
	width:100%;
	height:100%;
	border-top-right-radius:20px;
	border-top-left-radius:20px;
	background:linear-gradient(to right,transparent,transparent 8%,rgba(255,255,255,0.2) 8%,rgba(255,255,255,0.2) 22%,transparent 22%,transparent 88%,rgba(0,142,119,0.5) 88%)
}
.machine-middle {
	position:absolute;
	bottom:-8px;
	width:100%;
	height:8px;
	background:#202e3a;
	border-bottom-right-radius:35px;
	border-bottom-left-radius:35px
}
.machine-middle:after {
	content:"";
	position:absolute;
	left:10px;
	bottom:-18px;
	width:142px;
	height:18px;
	background:linear-gradient(to right,#202e3a,#202e3a 3%,#414d57 3%,#414d57 15%,#202e3a 15%,#202e3a);
	border-top-right-radius:6px
}
.machine-middle:before {
	content:"";
	position:absolute;
	left:52%;
	transform:translateX(-50%);
	bottom:-35px;
	width:98px;
	height:10px;
	background:linear-gradient(to right,#202e3a,#202e3a 3%,#414d57 3%,#414d57 15%,#202e3a 15%,#202e3a)
}
.machine-bottom {
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	bottom:20px;
	z-index:10;
	width:121px;
	height:78px;
	border-radius:15px;
	border:5px solid #d5d5d5;
	border-top-color:transparent
}
.machine-bottom:before {
	content:"";
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	top:-1px;
	width:110%;
	height:10px;
	background:linear-gradient(to right,#202e3a,#202e3a 3%,#414d57 3%,#414d57 15%,#202e3a 15%,#202e3a)
}
.machine-bottom:after {
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:59px;
	background:linear-gradient(to right,transparent,transparent 10%,rgba(255,255,255,0.3) 10%,rgba(255,255,255,0.3) 25%,rgba(255,255,255,0.1) 25%,rgba(255,255,255,0.1) 85%,rgba(0,0,0,0.1) 85%,rgba(0,0,0,0.1));
	border-bottom-left-radius:15px;
	border-bottom-.........完整代码请登录后点击上方下载按钮下载查看