题解 | #控制动画#
控制动画
https://www.nowcoder.com/practice/5cc9c7c7021c4206ac825fda21d6a4bb
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
#rect {
width: 120px;
height: 100px;
margin-bottom: 200px;
background-color: black;
/*补全代码*/
animation-duration: 10s;
animation-name: rect;
animation-iteration-count: infinite;
}
@keyframes rect {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<!-- 补全代码 -->
<div id="rect"></div>
<input id="range" type="range" step="1" onchange="handleRangeChange(this.value)"/>
<script type="text/javascript">
// 补全代码
let rectEl = document.getElementById('rect');
let rangeEl = document.getElementById('range');
function handleRangeChange(val) {
rectEl.style.animationDuration = parseInt(parseInt(val) + 9+((parseInt(val) -1)*(-2))) + 's';
}
</script>
</body>
</html>
投递字节跳动等公司9个岗位