CSS实现太极图（3个div实现）
使⽤三个div实现太极图的步骤如下：
HTML部分
<div class="box">
<div class="yin"></div>
<div class="yang"></div>
</div>
第⼀步，画⼀个宽⾼为300px的圆，并为其加上阴影（为了看起来有⽴体感）
.box{
width:300px;
height:300px;
margin:50px auto;
position:relative;
borderboxbox-shadow:0 0 50px rgba(0,0,0,.8);
background: #000;
border-radius: 50%;
      /*下⾯为实现旋转时所需代码*/　
      /*animation:rotation 2.5s linear infinite;
      -webkit-animation:rotation 2.5s linear infinite;
      -moz-animation:rotation 2.5s linear infinite;*/
}
出来的效果如下：
第⼆步，利⽤伪类实现左右两个半圆，⼀⿊⼀⽩。宽为150px，⾼为300px;（这⾥我先设置为红蓝两⾊）.box:before,
.box:after{
content:'';
display: block;
width:150px;
height:300px;
/*position:absolute;*/
/*top:0;*/
}
.box:before{
border-radius:150px 0 0 150px;
background-color: red;
left:0;
}
.
box:after{
border-radius:0 150px 150px 0;
background-color: blue;
/*right: 0;*/
}
在没有进⾏定位时，效果如下：
通过定位可以实现底图的阴阳分隔效果。
第三步，依次画两个宽⾼都为200px的圆，⼀⿊⼀⽩。上下定位。.yin,.yang{
position: absolute;
width:150px;
height:150px;
border-radius: 50%;
left:75px;
z-index: 99;
}
.yin{
background:#000;
top:0;
}
.yang{
background: #fff;
top:150px;
}
其效果如下：
第四步，利⽤伪类实现最⼩的两个⿊⽩⼩圆，并通过定位实现布局效果。
.yin:after,.yang:after{
width:75px;
height:75px;
border-radius: 50%;
position: absolute;
z-index: 999;
display: block;
content: '';
left:25%;
top:25%;
}
.yin:after{
background:#fff;
}
.
yang:after{
background: #000;
}
将底图样⾊做相应修改，得到最终效果如下：
绘制出太极图后我们可以通过CSS3中的@keyframes、animation动画实现旋转的太极图，具体代码如下：@keyframes rotation {
0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
@-webkit-keyframes rotation {
0% {-webkit-transform:rotate(0deg);}
100% {-webkit-transform:rotate(360deg);}        }
@-moz-keyframes rotation {
0% {-moz-transform:rotate(0deg);}
100% {-moz-transform:rotate(360deg);}        }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。