实现效果:一个小球无限制的转动(转动速度利用requestAnimationFrame根据自己的系统,来实现)。
1.首先写html部分,代码部分灰常简单,看下图哦
<!-- 圆心 -->
<div class="ponit"></div>
<!-- 轨道 -->
<div class="jin"></div>
<!-- 移动的圆圈 -->
<div class="call"></div>
2.写好了HTML之后再把相关的样式完成,这里的样式不定,可以根据自己的观点来设置样式,(具体写法看下图)
.ponit {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
width: 20px;
height: 20px;
background-color: rgb(152, 203, 49);
}
.jin {
position: absolute;
left: 50%;
top: 50%;
border-radius: 50%;
width: 600px;
height: 600px;