css - 如何在css中制作Hover的相反效果

标签 css

<分区>

我有以下代码:

img:hover {
  -webkit-animation:spin 0.5s linear forwards;
  -moz-animation:spin 0.5s linear forwards;
  animation:spin 0.5s linear forwards;
}

@-moz-keyframes spin {
    100% {
        -moz-transform: rotatey(360deg);
    }
}

@-webkit-keyframse spin {
    100% {
    -webkit-transform: rotatey(360deg);
    }
}
@keyframes spin {
    100% {
        -webkit-transform: rotatey(360deg);
        transform:rotatey(360deg);
    }
}

See live demo here

我有一张图片在悬停时会在自身上旋转。我希望在悬停时发生相同的效果。

如何实现？

最佳答案

为什么不使用 transition 而不是 animation？

img{
    transform: rotatey(0deg);
    transition: transform .5s ease-in-out;
}
img:hover {
  transform: rotatey(360deg);
}

https://jsfiddle.net/62RJc/342/

关于css - 如何在css中制作Hover的相反效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32245885/

上一篇：css - 跨越多行的内容区域

下一篇：css - 在 SweetAlert 上更改图标图像大小

相关文章：

CSS3边框半径简写解决方案

css - 在 div 中调整图像大小

html - 为什么 inline-flex/inline-grid 的行为与 contenteditable 中的 inline 不一致？

php - CakePHP 2.x 在 CSS 中使用 PHP

javascript - 滚动时 jQuery 不透明度被切断

css - float 元素和底部边框的问题

html - 如何让我的汉堡包菜单直接出现在我的汉堡包图标下方？

css - 如何找到合适的混合模式？

html - 使用 <h :outputStylesheet> makes <p:outputLabel> component invisible

html - div 相对父级之外的绝对 div 可见性