好看的杯子

body {
	background:seagreen;
}
main {
	width:300px;
	height:300px;
	border:1px solid transparent;
	margin:250px auto;
	position:relative;
}
.title {
	position:absolute;
	right:-50px;
	top:60px;
	width:30px;
	height:30px;
	/* background:red;
	*/
        color:white;
	font-size:25px;
	font-weight:bold;
	transition:0.5s;
	opacity:0;
}
main:hover .title {
	transition:1s;
	right:20px;
	transform:rotate(360deg);
	opacity:1;
}
main:active .title {
	transition:1s;
	opacity:0;
}
.shuibei {
	width:200px;
	height:200px;
	margin:50px auto;
	/* background:orange;
	*/
            position:relative;
}
.anniu {
	width:10px;
	height:25px;
	background:black;
	position:absolute;
	right:36px;
	top:28px;
}
.anniu::before {
	display:block;
	content:"";
	width:10px;
	height:10px;
	background:white;
	position:absolute;
	top:-10px;
}
.anniu::after {
	display:block;
	content:"";
	width:10px;
	height:30px;
	background:white;
	position:absolute;
	top:-10px;
	z-index:-1;
	transition:0.5s;
}
main:hover .anniu::after {
	transition:0.5s;
	transform:rotate(50deg);
}
.gaizi {
	width:109px;
	height:28px;
	background:white;
	margin:0 auto;
	transform-origin:0 100%;
	transition:0.5s;
}
main:hover .gaizi {
	transition:0.5s;
	transition-delay:0.2s;
	transform:rotate(-150deg);
}
.gaizis {
	width:81px;
	height:18px;
	background:rgb(44,44,44);
	position:absolute;
	top:10px;
	left:59px;
	z-index:-1;
}
.zui {
	width:0;
	height:0;
	border-right:9px solid rgb(97,96,96);
	border-bottom:5px solid rgb(97,96,96);
	border-left:9px solid transparent;
	border-top:5px solid transparent;
	position:absolute;
	top:-9px;
	right:0;
	z-index:-1;
}
.zui img {
	position:absolute;
	top:-60px;
	right:-10px;
	opacity:0;
}
main:hover .zui img {
	transition:1s;
	transition-delay:0.5s;
	top:-90px;
	opacity:1;
}
main:active .zui img {
	transition:1s;
	top:-110px;
	opacity:0;
}
.gaizis::before {
	display:block;
	content:"";
	width:0;
	height:0;
	border-left:7px solid transparent;
	border-bottom:9px solid rgb(44,44,44);
	border-top:9px solid transparent;
	border-right:7px solid rgb(44,44,44);
	position:absolute;
	left:-13px;
}
.gaizis::after {
	display:block;
	content:"";
	width:0;
	height:0;
	border-left:7px solid rgb(44,44,44);
	border-bottom:9px solid rgb(44,44,44);
	border-top:9px solid transparent;
	border-right:7px solid transparent;
	position:absolute;
	right:-13px;
}
.ning {
	width:109px;
	height:16px;
	background:black;
	margin:0 auto;
}
.beizi {
	width:109px;
	height:156px;
	background:white;
	position:relative;
	margin:0 auto;
}
.beizi img {
	position:absolute;
	left:20px;
	bottom:20px;
	transition:1s;
}
#cat2 {
	bottom:25px;
	left:15px;
	opacity:0;
}
main:active #cat {
	transition:0.5s;
	opacity:0;
}
main:active #cat2 {
	transition:1s;
	opacity:1;
}
.beizi::before {
	display:block;
	content:"";
	width:0;
	height:0;
	border-left:7px solid seagreen;
	border-bottom:79px solid seagreen;
	border-top:79px solid transparent;
	border-right:7px solid transparent;
	position:absolute;
	left:0;
}
.beizi::after {
	display:block;
	content:"";
	width:0;
	height:0;
	border-left:7px solid transparent;
	border-bottom:79px solid seagreen;
	border-top:79px solid transparent;
	border-right:7px solid seagreen;
	position:absolute;
	right:0;
}
h1 {
	position:absolute;
	bottom:-40px;
	left:70px;
	color:white;
	cursor:default;
}