当前位置:Gxlcms > 前端框架 > 如何用CSS纯代码画一个旋转的太极图(附代码)

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

时间:2021-07-01 10:21:17 帮助过:118人阅读

这是一个中国人都非常熟悉的图案——太极图,它分为阴阳两级,会旋转(用到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>

看图看效果:

太极图.jpg

以上就是如何用CSS纯代码画一个旋转的太极图(附代码)的详细内容,更多请关注Gxlcms其它相关文章!

人气教程排行