* {
	margin:0;
	padding:0;
}
html,body {
	display:flex;
	width:100%;
	height:100%;
	background:#f7f7f7;
	align-items:center;
}
.cloverBox {
	position:absolute;
	top:50%;
	margin-top:-200px;
	left:50%;
	margin-left:-200px;
	width:400px;
	height:400px;
	transform:rotate(0deg);
	/* 动画属性 */
			animation:round 10s linear infinite forwards;
}
.cloverBox:hover {
	animation-play-state:paused
}
@keyframes round {
	from {
	transform:rotate(0deg);
}
to {
	transform:rotate(360deg);
}
}.clover {
	width:50%;
	height:50%;
	float:left;
	transition:all .6s;
	cursor:pointer;
}
.clover:hover {
	transform:scale(0.9);
}
.c1 {
	background:#A82125;
	border-radius:0 50% 0 50%;
}
.c2 {
	background:#DFD03E;
	border-radius:50% 0 50% 0;
}
.c3 {
	background:#88DD3E;
	border-radius:50% 0 50% 0;
}
.c4 {
	background:#1EA8D7;
	border-radius:0 50% 0 50%;
}