javascript - 如何使用 CSS 或 JavaScript 旋转图像并在每次旋转之间暂停？

Question

关闭。这个问题需要更多focused .它目前不接受答案。












想改善这个问题吗？更新问题，使其仅关注一个问题 editing this post .

9 个月前关闭。




Improve this question




我有一张图片，我想从 0 旋转到 90 秒停止 2 秒，然后从 90 旋转到 180，然后停止 2 秒到 360 度任何想法，谢谢。

Answer 1

您可以使用 setTimeout和 setInterval适本地:

const rotate = (image, degrees) => {
  image.style.transform = `rotate(${+degrees}deg)`;
}

const img = document.getElementById('js-logo');

const oneLoop = () => {
  setTimeout(() => rotate(img, 90), 2000);
  setTimeout(() => rotate(img, 180), 4000);
  setTimeout(() => rotate(img, 360), 6000);
}

oneLoop();
setInterval(() => oneLoop(), 6000);

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/JavaScript-logo.png/240px-JavaScript-logo.png" alt="JS Logo" width="120" height="120" id="js-logo">