如何用CSS纯代码画一个旋转的太极图（附代码）-css教程-PHP中文网

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

yulia

发布： 2018-09-11 15:49:03

原创

3816人浏览过

这是一个中国人都非常熟悉的图案——太极图，它分为阴阳两级，会旋转（用到css3 animation动画属性），此图通过css3纯代码实现，它由若干个小圆组合而成，适合初学css3的人练练手，娱以致学，增加学习的乐趣。

HTML部分：

<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部分：

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

登录后复制

看图看效果：