需求：使用div和伪元素实现阴阳太极图
图例：
代码：
<html>
<head>
<title>太极图</title>
<style type="text/css">
div{
width: 200px;
height: 100px;
background-color: #ffffff;
border-style: solid;
border-color: #000;
border-bottom-width: 100px;
border-radius: 50%;
position: relative;
/*旋转动画*/
-webkit-animation: animal 4s infinite linear ;
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
}
div::before{
content: '';
position: absolute;
width: 20px;
height: 20px;
border: 40px solid #000000;
top: 50%;
left: 0;
border-radius: 50px;
background: #ffffff;
}
div::after{
content: '';
position: absolute;
width: 20px;
height: 20px;
border: 40px solid #ffffff;
top: 50%;
right: 0;
border-radius: 50px;
background: #000000;
}
/*旋转动画*/
@-webkit-keyframes animal {
0%{
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100%{
transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
}
}
</style>
</head>
<body>
<!-- 容器 -->
<div></div>
</body>
</html>
