一、圆周运动(CSS实现)
<style>
#wrap{
position: relative;
width: 500px;
height: 500px;
margin:100px auto;
border:1px solid;
border-radius: 50%;
}
#wrap p{
position: absolute;
top: 235px; /*此处的数值是测试来的*/
left: 0;
height: 0;
width: 100%;
transform: rotate(90deg);
animation: goudan 5s linear infinite;
}
#wrap span{
position: absolute;
left: -5px;
top: -5px;
width: 10px;
height: 10px;
background-color: rgb(54, 10, 250);
border-radius: 50%;
}
@keyframes goudan{
from{
transform: rotate(90deg);
}
to{
transform: rotate(450deg);
}
}
<!-- 构造一个大圆,并且使得一个小圆点在大圆的线上无限运动 -->
<div id="wrap">
<!-- 此处的p,相当于一个棍,顶部是span-小圆点,棍的宽度与圆的宽度相同,且运动,中点与圆点重合 -->
<p><span></span></p>
</div>
二、圆周运动(js实现)
<div id="wrap">
<p class="ball"></p>
</div>
<script>
(function(){
let oBall = document.querySelector("#wrap .ball")
let rad = 0 // rad表示角度值,初始不赋值的话,属性为undefined,并入运算不对
// setInterval(function(){ // 用这个方法,运动会卡,用requestAnimationFrame
// rad += 0.01
// let left = Math.sin(rad)*250+250
// let top = 250-Math.cos(rad)*250
// oBall.style.left = left+"px"
// oBall.style.top = top+"px"
// },1000/60)
let timer
requestAnimationFrame(function move(){
rad += 0.05
let left = Math.sin(rad)*250+250
let top = 250-Math.cos(rad)*250
oBall.style.left = left+"px"
oBall.style.top = top+"px"
timer = requestAnimationFrame(move)
})
document.onclick = function(){
cancelAnimationFrame(timer)
}
})()
</script>
<style>
#wrap{
width: 500px;
height: 500px;
border: 1px solid blue;
margin: 100px auto;
border-radius: 50%;
position: relative;
}
#wrap p.ball{
position: absolute;
top: 0;
left: 250px;
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -15px;
background-color: rgb(29, 233, 29);
border-radius: 50%;
}
</style>