CSS动画：太极

CSS动画：太极

*{
	margin: 0;
	padding: 0;
}
html,body{
	box-sizing: border-box;
	width:100%;
	height: 100vh;
	justify-content: center;/*水平居中*/
	align-items: center;/*垂直居中*/
	display: flex;
}

.taichi{
	width:350px;
	height: 350px;
	border: 2px solid black;
	border-radius: 50%;
	background: linear-gradient(to top, black 50%, white 50%);/*将背景色设置成两个不同的颜色*/
	position: absolute;
	animation: go 2s linear infinite;/*盒子旋转*/
}
.taichi:hover{
	animation-play-state: paused;/*暂停动画*/
}
@keyframes go{
	from{
		transform: rotate(0deg);
	}
	to{
		transform: rotate(360deg);
	}
}
.taichi>.white{
	width: 175px;
	height: 175px;
	border-radius: 50%;
	background: white;
	position: relative;
	top:25%;
	left: 0;
	float: left;
}
.taichi>.black{
	width: 175px;
	height: 175px;
	border-radius: 50%;
	background: black;
	position: relative;
	top:25%;
	left: 0;
	float: left;
}
.taichi>*:after{
	content: " ";
	display: block;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	transform: translate(-50%);
	position: relative;
	top:50%;
	left: 50%;
}
.taichi>.white:after{
	background: black;
}
.taichi>.black:after{
	background: white;
}