2021-05-03 js动画旋转效果

< !DOCTYPE html>
< html>
< head>
< title>js动画< /title>
< meta charset=“utf-8”>
< style type=“text/css”>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: purple;
text-align: center;
line-height: 100px;
}
< /style>
< /head>
< body>
< div id=“ball”>22< /div>
< /body>
< script type=“text/javascript”>
//获取元素
var ball = document.getElementById(‘ball’);
//确认当前要变化属性的初始值并定义一个变量作为初始值
var num = 0;
//使用定时器 每隔固定时间改变初始值
setInterval(function(){
num += 1;
//把要改变的值赋值给tranform: rotateZ
ball.style.transform = ‘rotateZ(’+num +‘deg)’;
},10);

< /script>
< /html>