效果
代码
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8"/>
<title>旋转的太极图</title>
<meta name="author" content="JiuMeilove"/>
<style>
*{
margin:0;
padding:0;
}
body{
background-color: #ccc;
}
body>div:first-of-type{
position:relative;
width: 300px;
height: 300px;
margin: 100px auto;
animation: rotate 2s infinite linear;
}
body>div:first-of-type>div:first-of-type{
height:100%;
background-color: #fff;
border-right: 150px solid #000;
border-radius: 150px;
}
body>div>div:first-of-type~div{
position:absolute;
top:0%;
left:25%;
width: 50px;
height: 50px;
background-color: #fff;
border: 50px solid #000;
border-radius: 75px;
}
body>div:first-of-type>div:last-of-type{
position:absolute;
top:50%;
left:25%;
background-color: #000;
border: 50px solid #fff;
}
@keyframes rotate {
from {
}
to {
transform: rotate(-360deg);
}
}
</style>
</head>
<body>
<div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>