如何使用CSS或JavaScript旋转图像,且每次旋转之间都需要暂停?

手提钻

我有一张图片,我想从0旋转到90停2秒,然后从90旋转到180再停2秒至360度,谢谢。

Shash Sinha

您可以使用setTimeoutsetInterval适当地:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章