题解 | #控制动画#
控制动画
https://www.nowcoder.com/practice/5cc9c7c7021c4206ac825fda21d6a4bb
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
#rect {
width: 120px;
height: 100px;
background-color: black;
animation: rect 10s linear infinite;
}
@keyframes rect {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<!-- 补全代码 -->
<div id="rect"></div>
<input id="range" type="range" value="1" min="1" max="10" step="1" />
<script type="text/javascript">
range.onchange = function () {
rect.style.animationDuration = 11 - this.value + 's'
}
</script>
</body>
</html>
