文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在光标悬停时旋转图像并保持旋转？

问如何在光标悬停时旋转图像并保持旋转？
EN

Stack Overflow用户

提问于 2017-03-10 21:27:21

回答 2查看 129关注 0票数 0

下面屏幕截图中的圆形旗帜图标有问题。我想让它顺时针旋转45度，只要光标悬停在图像上，它就保持+形旋转；当光标离开图像时，再旋转回ccw。

这是我到目前为止写的代码。当悬停时，图像正确地旋转45‘cw，但它立即返回到X形状。

#icon{
    display: inline-block;
    margin: 0 auto 0 0;
    width: 2.4em;
    height: 2.4em;
}

#icon:hover{
    -webkit-animation:cw 0.4s linear 1;
    -moz-animation:cw 0.4s linear 1;
    animation:cw 0.4s linear 1;
}

@-moz-keyframes cw { 100% { -moz-transform: rotate(45deg); } }
@-webkit-keyframes cw { 100% { -webkit-transform: rotate(45deg); } }
@keyframes cw { 100% { -webkit-transform: rotate(45deg); transform:rotate(45deg); } }

@-moz-keyframes ccw { 100% { -moz-transform: rotate(-45deg); } }
@-webkit-keyframes ccw { 100% { -webkit-transform: rotate(-45deg); } }
@keyframes ccw { 100% { -webkit-transform: rotate(-45deg); transform:rotate(-45deg); } }

那么我该如何解决这个问题呢？我认为应该对#icon进行一些修改，因为即使在旋转之后，它也可能保持其原始状态。

html

css

rotation

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-03-10 21:31:27

使用transition而不是keyframes动画：

img {
  transition: all .2s ease;
  transform: rotate(0deg)
}

img:hover {
  transform: rotate(45deg)
}

<img src="https://placehold.it/100x100">

票数 2

Stack Overflow用户

发布于 2017-03-10 21:37:24

尝试使用animation-fill-mode: forwards;或animation:cw 0.4s linear 1 forwards;

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42719541

复制

相似问题

问如何在光标悬停时旋转图像并保持旋转？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在光标悬停时旋转图像并保持旋转？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在光标悬停时旋转图像并保持旋转？
EN