27_控制动画

本题考点：动画、元素获取、range、改变事件

根据题目要求，滑动滑块需要改变动画的旋转速率，核心步骤有：

1. 首先设置id为”rect“矩形的动画属性
2. 补全id为”range'“的滑动框
3. 获取到id为”range“的滑动框并添加改变事件并且在改变事件中修改id为”rect“的矩形动画周期事件

参考答案：

#rect {
    width: 120px;
    height: 100px;
    background-color: black;
    animation: rect 10s linear infinite;
}
@keyframes rect {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

<div id="rect"></div>
<input id="range" type="range" step="1" defaultValue="1" value="1" min="1" max="10">

document.querySelector('#range').onchange = function() {
    let speed = document.querySelector('#range').value
    document.querySelector('#rect').style.animationDuration = 11 - speed + 's'
}