HTML写一个太极八卦

思路：

1）一圆半径为两个小圆的直径，画出来黑白两个二层圈

2）再以话出来的两个二层圈直径一半画两个三圈

3）给二层以及三层上色

<!doctype html>
<html>
<head>
#by : linhut<br>
#time:2017/5/16
<meta charset="utf-8">
<title>太极图</title>
<style>
.ouside{
	width:200px; height:200px; border-radius:50%; border:1px solid #FFF; background-color:#000; position:relative;
}
.left{
	position:absolute; height:200px; width:100px; left:0px; top:0px; border-radius:100% 0 0 100% / 50% 0 0 50%; background:#000;
}
.right{
	position:absolute; height:200px; width:100px; left:100px; top:0px; border-radius:0 100% 100% 0 / 0 50% 50% 0; background:#FFF;
}
.up{
	position:absolute; width:50%; height:50%; top:0px; left:25%; border-radius:50px; background:#000;
}
.up_mini{
	position:absolute; width:25%; height:25%; left:37.5%; top:37.5%; background:#FFF; border-radius:50%;
}
.down{
	position:absolute; bottom:0px; left:25%; width:50%; height:50%; border-radius:50px; background:#FFF;
}
.down_mini{
	position:absolute; width:25%; height:25%; left:37.5%; bottom:37.5%; background:#000; border-radius:50%
}
#turn{
	animation-name:donghua;
	animation-duration:1s;
	animation-timing-function:linear;
	animation-iteration-count:infinite;
	}
@keyframes donghua{
	0%{
		transform:rotate(0deg);
	}
	100%{
		transform:rotate(360deg);
	}
}
</style>
</head>

<body style="background-color:#c4c4c4">
<div class="ouside" id="turn">	<!-- 建一级圆底色为黑-->
    <div class="left"></div>		<!-- 分一半为黑-->
    <div class="right"></div> <!-- 分一半为白-->
    <div class="up">		<!-- 二级黑圈-->
			<div class="up_mini"></div> <!-- 三级白圈-->
		</div>
		<div class="down">	<!-- 二级白圈-->
			<div class="down_mini"></div> <!-- 三级黑圈-->
  </div>
</div>
</body>
</html>