CSS 动画 - 每次悬停时进一步旋转 45 度

Posted 2023-03-06

【中文标题】CSS 动画 - 每次悬停时进一步旋转 45 度

【英文标题】：CSS animation - Rotate 45 degrees further on each hover

【发布时间】：2017-07-29 05:25:18

【问题描述】：

我希望有一个旋转 45 度的元素，当显示网站时（工作正常），但我也希望元素在每次悬停时再旋转 45 度。该元素不应在任何时候恢复。如何使用 CSS 动画实现这一点？

我创建了一个 fiddle 来制作第一个动画，但我无法让它在每次悬停时多旋转 45 度。

我的 html：

<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg"   >

我的 CSS：

.image 
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 0.6s linear;
-moz-animation:spin 0.6s linear;
animation:spin 0.6s linear;
animation-fill-mode: forwards;


@-moz-keyframes spin  100%  -moz-transform: rotate(45deg);  
@-webkit-keyframes spin  100%  -webkit-transform: rotate(45deg);  
@keyframes spin  100%  -webkit-transform: rotate(45deg); transform:rotate(45deg);  

【参考方案1】：

我找不到用纯 CSS 回答您的问题的方法。如果您愿意使用 jQuery，这里是一个潜在的解决方案...

jsfiddle

var image = $('#spin');
var r = 45;

$(function() 
  image.css(
    'transform': 'rotate(' + r + 'deg)'
  );

  jQuery.fn.rotate = function(degrees) 
    $(this).css(
      'transform': 'rotate(' + degrees + 'deg)'
    );
  ;

  image.mouseover(function() 
    r += 45;
    $(this).rotate(r);
  );
);

.image 
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  transition: all 0.6s ease-in-out;
  transform: rotate(0deg);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="spin" class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg"   >

【讨论】：

看起来它完全符合我的需要！将尝试实施它并返回更新。谢谢！ :-)

现在已经实现了，效果很好！再次感谢您！

【参考方案2】：

尝试使用 javascript 的 onmouseenter，这样当鼠标进入元素时它会做一些事情，在本例中旋转 45 度。这是jQuery方式： https://api.jquery.com/mouseenter/

//use library: http://jqueryrotate.com/

$('.image').mouseenter(function () 
    $(this).rotate(45);
);

【讨论】：

我可能需要更多关于如何实现我所描述的指导。似乎不可能只通过 CSS 来做我需要做的事情。我认为我主要关心的是每次悬停都需要在元素的当前旋转上增加 45 度，这似乎非常困难。不过我可能会遗漏一些东西。