<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>animation动画效果--太极图</title>
<style type="text/css">
.box{
width: 500px;
height: 500px;
border-radius: 50%;
border: 1px solid black;
overflow: hidden;
position: absolute;
animation: change 1s linear infinite;
}
.left,.right{
width: 50%;
height: 100%;
float: left;
}
.left{
background-color: #000000;
}
.right{
background-color: #FFFFFF;
}
.top,.bottom{
width: 250px;
height: 250px;
border-radius: 50%;
position: absolute;
left: 125px;
}
.top{
background-color: #000000;
}
.bottom{
background-color: #FFFFFF;
top: 250px;
}
.cricle1,.cricle2{
width: 50px;
height: 50px;
border-radius: 50%;
position:absolute;
top: 100px;
left: 102px;
}
.cricle1{
background-color: #FFFFFF;
}
.cricle2{
background-color: #000000;
}
//定义动画
@keyframes change{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="left">
<div class="top">
<div class="cricle1"></div>
</div>
</div>
<div class="right">
<div class="bottom">
<div class="cricle2"></div>
</div>
</div>
</div>
</body>
</html>
运行效果如下: