Question

我制作了这个非常简单的网页，它有一个居中的图像。单击它时，它开始旋转。

现在我尝试使用JavaScript来实现这一点，以便当您再次点击它时，它会越来越快地旋转，我已经看过多个类似的堆栈溢出问题，但我只是似乎能够让它发挥作用：

＆＃13;

var img = document.querySelector("#spin")
img.addEventListener('click', onClick, false);

var deg = 360;

function onClick() {

  deg += 90;

  var stylesheet = document.styleSheets[0];
  var spinRule = stylesheet.cssRules[0];
  var spinRule_To = spinRule.cssRules[1];
  var spinRule_To_Style = spinRule_To.style;
  spinRule_To_Style.setProperty("transform:rotate", deg);
}

＆＃13;

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
#tbl {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}
#tbl td {
  vertical-align: middle;
  text-align: center;
}
img:target {
  animation-name: spin;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

＆＃13;

<table id="tbl">
  <tr>
    <td>
      <div>
        <a href="#spin">
          <img id="spin" src="http://h08.us/Hob-Cos.png" title="THE MEMES ARE BACK BOIS">
        </a>
      </div>
    </td>
  </tr>
</table>

＆＃13;

Answer 1

如果允许jquery id，请尝试此操作。

在您的代码中，您使用var deg增加旋转度，但这不会提高速度，您需要通过每次点击减少动画的持续时间来加速动画。

var duration = 4000;
$('#spinTrigger').click(function(){
  $('#spin').css("animation-duration", duration + 'ms');
  duration -= 200;
  if (duration == 0) {
    duration = 100;
  }
})

@keyframes spin {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}
#tbl {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}
#tbl td {
  vertical-align: middle;
  text-align: center;
}
img{
  width:300px;
}
img:target{
  animation-name: spin;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl">
  <tr>
    <td>
      <div>
        <a href="#spin" id="spinTrigger">
          <img id="spin" src="http://h08.us/Hob-Cos.png" title="THE MEMES ARE BACK BOIS">
        </a>
      </div>
    </td>
  </tr>
</table>

单击时使用javascript加速CSS动画

1 个答案: