<!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>