body代码
<body>
<div id="d1">1
<div>2</div>
<div>3</div>
<div>4</div>
</div>
css代码
<style>
#d1{
width: 400px ;
height: 400px;
border-radius: 200px;
background-color: lightblue;
position:relative;
line-height: 400px;
text-align: center;
animation: a 10s linear infinite;
}
#d1 div{
width: 100px;height: 100px;
border:1px solid red;
position: absolute;
text-align: center;
line-height: 100px;
animation: b 10s linear infinite;
}
div:nth-child(1){
left:300px;
top:0px;
}
div:nth-child(2){
left:0px;
top:0px
}
div:nth-child(3){
left:150px;
top:350px;
}
@keyframes a {
from { transform: rotate(0deg);}
to { transform: rotate(360deg);}
}
@keyframes b {
from { transform: rotate(0deg);}
to { transform: rotate(-360deg);}
}
</style>
效果图
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201216094041683.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTA0Mjgy,size_16,color_FFFFFF,t_70)