实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>旋转太极图</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.box{width: 300px;height: 300px;margin: 100px;position: relative;
animation: motion 3s infinite linear;
}
.yinyu{
height: 300px;
width: 300px;
background-color: black;
border-radius: 50%;
}
.yangyu{
height: 300px;
width: 150px;
background-color: white;
border-top-right-radius: 150px;
border-bottom-right-radius: 150px;
position: absolute;
top: 0;
right: 0;
}
.yin{
width: 150px;
height: 150px;
border-radius: 50%;
background-color: black;
position: absolute;
top: 0;
left: 75px;
}
.yang{
width: 150px;
height: 150px;
border-radius: 50%;
background-color: white;
position: absolute;
top: 150px;
left: 75px;
}
.yinl{
width: 40px;
height: 40px;
background-color: black;
border-radius: 50%;
position: absolute;
bottom: 55px;
left: 130px;
}
.yangl{
width: 40px;
height: 40px;
background-color: #FFFFFF;
border-radius: 50%;
position: absolute;
top: 55px;
left: 130px;
}
@keyframes motion{
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}
</style>
</head>
<body>
<h2>旋转太极图</h2>
<div class="box">
<div class="yinyu"></div>
<div class="yangyu"></div>
<div class="yin"></div>
<div class="yang"></div>
<div class="yinl"></div>
<div class="yangl"></div>
</div>
</body>
</html>设计思路
1、划定一个正方形区域，将黑白两个形状相同的矩形覆盖在正方形上面；
2、设置正方形四角弧度获得一个正圆；
3、分别以宽为半径，在正方形对称轴上画与矩形同颜色的正切圆；
4、分别在黑白区域画出颜色相反的小圆。
运行效果
