我们现在最后制作出的效果如何。
我们先分析应该如何制作这样一个太极图案。首先外面是一个大圆。
其次我们观察太极图案的内部应该如何实现。
我们可以使用两个长方形进行填充。然后给大圆添加overflow:hidden；就能得到两个半圆，一半是黑色一半为白色。
最后就是分别在两个长方形的盒子两端添加圆形。这个太极图案就成功。
html代码
（向上滑动查看内容）
<div class="wrap">
<div class="taici">
<div class="white">
<div class="mr mr1"></div>
</div>
<div class="black">
<div class="mr mr2"></div>
</div>
</div>
</div>
（向上滑动查看内容）
body,div{margin:0;padding:0;}
.taici{
position:relative;
width:300px;
height:300px;
margin:50px auto;
border-radius:50%;
overflow:hidden;
box-shadow:0 0 10px 0;
animation:whirl 6s linear infinite;
}
@keyframes whirl{
100%{
transform:rotate(360deg);
}
}
.white{
position:absolute;
right:0;
width:50%;
height:300px;
}
.white:after{
position:absolute;
top:0;
right:75px;
height:150px;
width:150px;
border-radius:50%;
content:"";
background-color:#fff;
z-index:4;
}
.black{
position:absolute;
left:0;
width:50%;
height:300px;
background-color:#000;
}
.black:after{
position:absolute;
bottom:0;
left:75px;
height:150px;
width:150px;
border-radius:50%;
content:"";
background-color:#000;
}
.mr{
position:absolute;
width:50px;
height:50px;
border-radius:50%;
z-index:9;
}
.mr1{
top:50px;
right:120px;
background-color:#000;
}
.mr2{
bottom:50px;
left:120px;
background-color:#fff;
}
版权声明：本站内容全部来自于腾讯微信公众号，属第三方自助推荐收录。《纯css3制作旋转太极图案》的版权归原作者「瑾谦」所有，文章言论观点不代表Lambda在线的观点， Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458
文章来源： 阅读原文
瑾谦微信公众号：jinqianweb
手机扫描上方二维码即可关注瑾谦微信公众号
