如何用CSS纯代码画一个旋转的太极图（附代码）

<div class="square">
 <div class="rect rect_one">
 <div class="inner_circle rect_one_one">
 <div class="dot rect_one_two"></div>
 </div>
 </div>
 <div class="rect rect_two">
 <div class="inner_circle rect_two_one">
 <div class="dot rect_two_two"></div>
 </div>
 </div>
 </div>
 <div style="text-align:center;clear:both">
 <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
 <script src="/follow.js" type="text/javascript"></script>
 </div>

<style>
 .square {
 width: 400px;
 height: 400px;
 position: relative;
 transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 animation: rotate infinite linear 5s;
 margin: 10% auto;
 -webkit-animation: rotate infinite linear 5s;
 margin: 10% auto;
 -moz-animation: rotate infinite linear 5s;
 margin: 10% auto;
 }
 .rect {
 width: 400px;
 height: 200px;
 position: relative;
 border: 1px #d2d2d2 solid;
 border-bottom: none;
 } 
 .inner_circle {
 width: 200px;
 height: 200px;
 border-radius: 200px;
 position: absolute;
 z-index: 1;
 } 
 .dot {
 width: 50px;
 height: 50px;
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 margin: auto;
 border-radius: 50%;
 } 
 .rect_one {
 border-radius: 200px 200px 0 0;
 background: white;
 } 
 .rect_one_one {
 bottom: -100px;
 left: 0;
 background: black;
 } 
 .rect_one_two {
 background: white;
 } 
 .rect_two {
 border-radius: 0 0 200px 200px;
 background: black;
 } 
 .rect_two_one {
 bottom: 100px;
 right: 0;
 background: white;
 }
 .rect_two_two {
 background: black;
 } 
 @keyframes rotate {
 from {
 transform: rotate(0deg);
 -webkit-transform: rotate(0deg);
 }
 to {
 transform: rotate(360deg);
 -webkit-transform: rotate(360deg);
 }
 }
 </style>