利用css圆角及动画实现旋转的太极图

利用csss圆角及动画实现旋转的太极图
1.css圆角：
css圆角是利用给盒子做边框倒角来实现圆形的制作，及在设定好盒子宽高之后添加boder-radios:50%;
2.动画：
动画在这里是设置太极图的旋转，利用@animation属性来实现动画效果。
接下来我简单说一下编辑过程：
第一步是编辑结构：
定义六个小盒子将作为太极图的各个部分，
最外层的盒子作为实现旋转效果的盒子。

<div id="main">
        <div class="box">
            <div class="box1"></div>
            <div class="box2"></div>
            <div class="box3"></div>
            <div class="box4"></div>
            <div class="box5"></div>
            <div class="box6"></div>
        </div>
</div>

接着是给盒子添加样式：
让每个盒子拥有不同的样式以此达到太极图的制作，
#main这一个盒子给了背景色是为了在添加动画后能够出现对比色，更好的显示动画效果，
#box这个盒子添加的animation属性配合最后的动画属性来时实现旋转动画效果。

#main{ 
            width: 200px;
            height: 200px; 
            background: grey;
            margin:100px auto;
            position: relative;
        }
#main .box{  
        width: 200px;
        height: 200px;
        position: relative;
        animation: 3s move linear infinite;   
        border-radius: 50%;
         }

         /* 这里的box1和box2是用来实现左右两个白色和黑色半圆 */
#main .box1{ 
            width: 100px;
            height: 200px;
            background: white;
            border-radius: 100px 0 0 100px;
            position: absolute;
            left: 0;
            top: 0;
        }
#main .box2{  
            width: 100px;
             height: 200px;
              background:black;
            border-radius: 0 100px  100px  0;
            position: absolute;
            left:100px;
            top: 0;
            }

            /* 这里的box3和box4是用来实现上下黑色和白色相交的弧形（也就是两个逗号） */
#main .box3{ 
            width: 100px;
             height: 100px;
              background:black;
            border-radius: 50px;
            position: absolute;
            left:50px;
            top: 0;
        }
#main .box4{ 
            width: 100px; 
            height: 100px;
             background:white;
            border-radius: 50px;
            position: absolute; 
            right:50px; 
            bottom:0;
        }

  /* 这里的box5和box6是用来实现上下黑色和白色 中心的小圆*/
#main .box5{
            width: 30px; 
            height: 30px;
             background:white;
            border-radius: 15px;
            position: absolute; 
            left:85px; 
            top:35px;
        }
#main .box6{ 
            width: 30px;
            height: 30px;
            background:black;
            border-radius: 15px;
            position: absolute; left:85px; bottom:35px; z-index: 1;
        }

最后是定义动画：
这里是让所有圆整体逆时针旋转以达到动画效果

 @keyframes move{
            0%{transform: rotate(0deg);}
            100%{transform: rotate(-360deg);}
        }