* {
	margin:0;
	padding:0;
}
html,body {
	display:flex;
	width:100%;
	height:100%;
	background:#f7f7f7;
	align-items:center;
}
.box {
	position:relative;
	width:200px;
	margin:0 auto;
	transition:all .6s;
}
.box:hover {
	transform:rotate(360deg);
}
.top {
	width:0;
	margin:0 auto;
	border-top:0px solid transparent;
	border-left:50px solid transparent;
	border-right:50px solid transparent;
	border-bottom:200px solid #6b6b6b;
}
.top_shadow {
	position:absolute;
	left:50%;
	margin-left:-1px;
	top:15px;
	width:2px;
	height:150px;
	background:#fff;
	border-radius:50%;
	box-shadow:0 0 10px #fff;
}
.center {
	position:relative;
	width:0px;
	margin:0 auto;
	border-top:60px solid #6b6b6b;
	border-left:50px solid transparent;
	border-right:50px solid transparent;
	border-bottom:0px solid transparent;
}
.center1 {
	position:absolute;
	top:-80px;
	left:0px;
	width:50px;
	height:2px;
	background:#fff;
	border-radius:50%;
	box-shadow:0 0 10px #fff;
	transform:rotate(35deg);
}
.center2 {
	position:absolute;
	top:-80px;
	right:0px;
	width:50px;
	height:2px;
	background:#fff;
	border-radius:50%;
	box-shadow:0 0 10px #fff;
	transform:rotate(-35deg);
}
.bottom {
	z-index:2;
	top:-15px;
	position:relative;
	width:50px;
	margin:0 auto;
}
.bottom div {
	width:30px;
	height:8px;
	margin:0 auto;
	border-radius:5px;
	background:red;
	border-bottom:0.5px solid #fff;
}
.round {
	position:relative;
	margin:0 auto;
	top:-20px;
	width:50px;
	height:50px;
	border-radius:50%;
}
.centerRound {
	position:absolute;
	width:30px;
	height:30px;
	top:50%;
	left:50%;
	margin-top:-15px;
	margin-left:-15px;
	background:#fff;
	border-radius:50%;
	z-index:1;
}
.round:after {
	position:absolute;
	width:50px;
	height:50px;
	background:linear-gradient(to right,red,blue);
	content:'';
	border-radius:50%;
	background:linear-gradient(to bottom right,#000,#eee);
}