How to draw a rotating Tai Chi diagram using pure CSS code (with code)

This is a pattern that Chinese people are very familiar with - the Tai Chi diagram. It is divided into two levels, Yin and Yang, and can rotate (using the CSS3 animation animation property). This diagram is realized through CSS3 pure code. It consists of several small circles. It is a combination that is suitable for beginners to practice CSS3, to entertain them and increase the fun of learning.

HTML part:

<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>

CSS part:

<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>

Look at the picture to see the effect:

The above is the detailed content of How to draw a rotating Tai Chi diagram using pure CSS code (with code). For more information, please follow other related articles on the PHP Chinese website!