下面屏幕截图中的圆形旗帜图标存在问题。我希望它顺时针旋转 45 度,只要光标悬停在图像上,它就会保持 + 形状旋转;然后当光标离开图像时逆时针旋转。
这是我到目前为止编写的代码。悬停时,图像会正确顺时针旋转 45',但会立即变回 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
应该稍微修改一下,因为它可能在旋转后仍保持其原始状态。
最佳答案
使用transition
代替keyframes
动画:
img {
transition: all .2s ease;
transform: rotate(0deg)
}
img:hover {
transform: rotate(45deg)
}
<img src="https://placehold.it/100x100">
关于html - 如何旋转图像并在光标悬停时保持旋转?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42719541/