版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/duola8789/article/details/84752473
效果
准备
首先写出基本的CSS布局
.outer-circle {
margin: 50px auto;
width: 300px;
height: 300px;
text-align: center;
border-radius: 100%;
background: palegoldenrod;
position: relative;
}
.circle {
position: absolute;
left: 50px;
top: 50px;
width: 50px;
height: 50px;
line-height: 50px;
background: cadetblue;
border-radius: 100%;
}
此时效果：
实现1
使用动画实现transfrom: rotate(1turn)，这个时候的旋转是围绕自身进行旋转，想让小球围绕大球的圆心旋转，需要使用transform-origin属性，使旋转的中心刚好位于圆的中心
此时HTML需要两个元素，当外层绕大球圆心转动时，小球围绕自身进行反向旋转
HTML代码：
<div class="outer-circle">
<div class="circle">
<div class="inner-circle">Hello</div>
</div>
</div>
CSS代码：
.outer-circle {
margin: 50px auto;
width: 300px;
height: 300px;
text-align: center;
border-radius: 100%;
background: palegoldenrod;
position: relative;
}
.circle {
position: absolute;
left: 50px;
top: 50px;
width: 50px;
height: 50px;
line-height: 50px;
background: cadetblue;
border-radius: 100%;
animation: rotate 5s infinite linear;
transform-origin: 100px 100px;
}
.inner-circle {
animation: inherit;
animation-direction: reverse;
}
@keyframes rotate {
from {
transform: rotate(0turn);
}
to {
transform: rotate(1turn);
}
}
实现2
不添加内层的<div>，直接使用transform实现，原理是
具体实现是就是先利用translate将旋转中心与大圆中心重合，然后旋转，之后又利用translate，移动到原先的位置，在围绕自身中心进行反方向旋转
此时的HTML不需要嵌套内层<div>了
<div class="outer-circle">
<div class="circle">Hello</div>
</div>
此时的CSS代码不再设置transform-origin了
<style scoped>
.outer-circle {
margin: 50px auto;
width: 300px;
height: 300px;
text-align: center;
border-radius: 100%;
background: palegoldenrod;
position: relative;
}
.circle {
position: absolute;
left: 50px;
top: 50px;
width: 50px;
height: 50px;
line-height: 50px;
background: cadetblue;
border-radius: 100%;
animation: rotate 5s infinite linear;
}
@keyframes rotate {
from {
transform: translate(100px, 100px) translate(-50%, -50%) rotate(0)
translate(-100px, -100px) translate(50%, 50%) rotate(1turn)
}
to {
transform: translate(100px, 100px) translate(-50%, -50%) rotate(1turn)
translate(-100px, -100px) translate(50%, 50%) rotate(0)
}
}
具体原理的讲解参考这篇文章。
实现3
这种实现就是对第二种方法的简化，直接将小球放到大球的中心，移动的时候只需要移动Y轴就可以了
此时CSS代码：
.outer-circle {
display: inline-block;
padding: 150px;
margin: 50px auto;
text-align: center;
border-radius: 100%;
background: palegoldenrod;
}
.circle {
width: 50px;
height: 50px;
line-height: 50px;
background: cadetblue;
border-radius: 100%;
animation: rotate 5s infinite linear;
}
@keyframes rotate {
from {
transform: rotate(0turn) translateY(-150px) translateY(50%) rotate(1turn)
}
to {
transform: rotate(1turn) translateY(-150px) translateY(50%) rotate(0turn)
}
}