欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-03-28 08:14:39
...
这是一个中国人都非常熟悉的图案——太极图,它分为阴阳两级,会旋转(用到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>

看图看效果:

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

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

相关标签: css