题解 | #控制动画#
控制动画
https://www.nowcoder.com/practice/5cc9c7c7021c4206ac825fda21d6a4bb
思路：使用animation设置动画，使用rect.style.animationDuration设置动画持续时间(注意单位是s)。
<style type="text/css">
#rect {
width: 120px;
height: 100px;
background-color: black;
animation:rect 10s
}
@keyframes rect {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
<body>
<div id="rect"></div>
<input id="range" type="range" min="1" max="10" value="1" step="1"/>
<script type="text/javascript">
let input=document.getElementById("range")
input.onchange=function(){
let rect=document.getElementById("rect")
let speed=this.value
rect.style.animationDuration=11-speed+'s'
}
</script>
总结：使用animation设置动画，使用rect.style.animationDuration设置动画持续时间(注意单位是s)。表示范围的input框是type为range，min为最小值，max是最大值，step是间隔，注意属性均是字符串。
#控制动画#前端js面试 文章被收录于专栏
前端js面试，帮助你更好的理解js。
