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