首先點此查看效果
主要原理
利用animation實現(xiàn)轉動卤妒，然后通過transform-origin設置旋轉的原點
點此查看如何使用transform-origin生闲。
代碼實現(xiàn)
html結構
<div class="circle-box">
<div class="big-circle"></div>
<div class="small-circle"></div>
</div>
css樣式
.circle-box{
position: absolute;
left: 50%;
top: 200px;
transform: translate(-50%, 0);
}
.big-circle{
width: 100px;
height: 100px;
background: red;
border-radius: 50%;
}
.small-circle{
position: absolute;
left: 0;
top: 50%;
margin-left: -5px;
margin-top: -5px;
width: 10px;
height: 10px;
background: blue;
border-radius: 50%;
/*animation: autoCircle 2s infinite linear;*/
/*transform-origin: 55px 5px;*/
}
@keyframes autoCircle {
0%{ transform: rotate(0deg); }
100%{ transform: rotate(360deg);}
}
為了方便理解亮靴，在不添加動畫之前鹤盒，可以先調整樣式释牺，把小圓放在大圓上才写。然后再添加動畫，設置旋轉原點即可镀娶。
