效果
准备
首先写出基本的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 cl