如何在悬停时以及每 10 秒旋转一次图像？

Question

我制作了一个CSS，当有人将其悬停时可以旋转我的图像 但我也会每 10 秒旋转一次这张图片

.smiley-construct {
    width: 64px;
    padding: 0;
}

.smiley-construct img {
    transition: 0.70s ease-in-out;
    -webkit-transition: 0.70s;
    -moz-transition: 0.70s;
    -ms-transition: 0.70s;
    -o-transition: 0.70s;
}

.smiley-construct img:hover {
    transition: 0.70s ease-in-out;
    -webkit-transition: 0.70s;
    -moz-transition: 0.70s;
    -ms-transition: 0.70s;
    -o-transition: 0.70s;
    transform: rotate(540deg);        
    -webkit-transform: rotate(540deg);
    -moz-transform: rotate(540deg);
    -o-transform: rotate(540deg);
    -ms-transform: rotate(540deg);
}      


<div class="smiley-construct">
      <a href="https://quentinrenaux.com/thisishome"><img src="https://quentinrenaux.com/wp-content/themes/quentinrenaux-V2.01.2021/img/smile/smile.png"></a>
</div> 

我可以将其更改为每 10 秒旋转一次图像吗 但也保持悬停旋转？

谢谢

Answer 1

您可以在 css 中创建关键帧，如下所示：

@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }
  93% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(540deg);
  }


.smiley-construct img {
    animation: rotating 10s infinite;
    transition: 0.70s ease-in-out;
    -webkit-transition: 0.70s;
    -moz-transition: 0.70s;
    -ms-transition: 0.70s;
    -o-transition: 0.70s;
}

Answer 2

我们可以有两个 CSS 动画 - 一个旋转脸部，然后等待 10 秒的最佳部分并继续这样做，另一个在悬停时启动并仅旋转一次。

我不太确定你想要的效果 - 每次旋转后脸都会颠倒吗？如果没有，您可能想尝试一下动画填充模式。

这是一个片段：

.smiley-construct {
    width: 64px;
    padding: 0;
}

.smiley-construct img {
    animation-name: spinwait;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

.smiley-construct img:hover {
    animation-name: spin;
    animation-duration: 0.7s;
    animation-iteration-count: 1;
}
@keyframes spinwait {
    0% {
        transform: rotate(0deg);
    }
    7% {
        transform: rotate(540deg);
    }
    7.1% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(540deg);
    }
}

<div class="smiley-construct">
      <a href="https://quentinrenaux.com/thisishome"><img src="https://quentinrenaux.com/wp-content/themes/quentinrenaux-V2.01.2021/img/smile/smile.png"></a>
</div>

Answer 3

您可以在 javascript 中创建一个函数并创建如下所示的内容： 或者在页面加载时使用 jquery，但在不知道结构和可用资源的情况下，我无法为您做出决定。

var elemPicture = document.getElementById("PictureId");
 elemPicture.style.transition = "all 0.5s"; 
 elemPicture.style.transform = "rotate(15deg)"; 

Answer 4

更好的是，使用关键帧。如果你能使用 CSS，就不需要添加额外的 JS。

这里有关于如何执行此操作的很好的解释。

Answer 5

var elemPicture = document.getElementById("PictureId");
 elemPicture.style.transition = "all 0.5s"; 
 elemPicture.style.transform = "rotate(15deg)";