正文 

当前位置： 首页 > 源码 >

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

     2023-03-06     287

关键词：

【中文标题】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 度，这似乎非常困难。不过我可能会遗漏一些东西。

jquery css在每次按下按钮时连续旋转90度

】jquerycss在每次按下按钮时连续旋转90度【英文标题】：jquerycsscontinousrotateby90degreesoneachbuttonpress【发布时间】：2014-07-1102:45:54【问题描述】：我找到了部分满足我需求的解决方案。当按下一个按钮时，我需要一个div旋转90度，然... 查看详情

CSS 动画中断变换

】CSS动画中断变换【英文标题】：CSSAnimationbreaktransform【发布时间】：2018-05-0312:21:02【问题描述】：我的CSS文件有点问题。我尝试制作一个缩放到无限的图标（有效），当我点击图标时，动画将父级旋转到90度，图标旋转到45度（... 查看详情

JS动画在悬停时旋转

】JS动画在悬停时旋转【英文标题】：JSanimationspinonhover【发布时间】：2016-10-2709:12:49【问题描述】：这是我关于***的第一个问题。想知道是否有人可以向我指出有关使用JS/JQuery动画按钮的解决方案/资源。特别是，我无法理解的... 查看详情

悬停时的CSS 3旋转动画[重复]

】悬停时的CSS3旋转动画[重复]【英文标题】：CSS3RotateAnimationonhover[duplicate]【发布时间】：2015-12-1513:31:02【问题描述】：我有这段代码可以在悬停时进行旋转。它根本不起作用。它有什么问题？我需要完整的360º旋转动画.icon-style-... 查看详情

使用变换时，悬停时的 CSS 动画停留在最后一个关键帧：旋转

】使用变换时，悬停时的CSS动画停留在最后一个关键帧：旋转【英文标题】：CSSanimationonhoverstayatlastkeyframewhenusingtransform:rotate【发布时间】：2014-10-2500:37:39【问题描述】：我试图让此动画在悬停时停留在其最后一个关键帧，但它... 查看详情

CSS动画/过渡旋转标志（步骤）

】CSS动画/过渡旋转标志（步骤）【英文标题】：CSSAnimation/TransitionRotateLogo(Steps)【发布时间】：2018-10-2506:33:29【问题描述】：我开始介绍CSS动画/过渡。我寻求帮助。我想获得这个效果：图像标志：它将在1秒内旋转180度它将在2秒... 查看详情

鼠标悬停时的CSS3背景旋转动画

】鼠标悬停时的CSS3背景旋转动画【英文标题】：CSS3backgroundrotationanimationinmousehover【发布时间】：2012-09-1210:42:43【问题描述】：这是我的div。#div1position:absolute;top:50%;left:50%;margin-left:-100px;margin-top:420px;width:158px;height:158px;background-i 查看详情

将 BarButtonItem 旋转 45 度（动画）

】将BarButtonItem旋转45度（动画）【英文标题】：RotateBarButtonItemby45degrees(animated)【发布时间】：2017-01-2022:30:52【问题描述】：看起来动画不是我的专长：/在我的导航栏中，我有一个自定义BarButtonItem，这是一个加号，可以将内容添... 查看详情

悬停时旋转时带有 CSS 多边形的不需要的边框

...了一个T恤形状的多边形，除非我尝试在悬停时对其进行动画处理，否则它的显示效果与应有的完全一样。一旦我悬停，我会得到一个右边框和下边框，其颜色与动画发生时为多边形设置的背景颜色相同。动画完成后，边框再次... 查看详情

如何在悬停时在 150 毫秒内将元素旋转到 180 度？

】如何在悬停时在150毫秒内将元素旋转到180度？【英文标题】：HowdoIrotateanelementto180degover150msonhover?【发布时间】：2012-03-1512:33:33【问题描述】：鼠标悬停时，我需要在150ms的间隔内将元素逆时针旋转180˚，然后在鼠标移出时，我... 查看详情

悬停时启动旋转动画，但悬停时仍会完成

】悬停时启动旋转动画，但悬停时仍会完成【英文标题】：Spinanimationinitiatedonhoverbutstillcompleteswhenoffhover【发布时间】：2018-05-2901:01:04【问题描述】：所以我已经完成了一些简单的代码来当你将鼠标悬停在容器上时旋转内部元素... 查看详情

平滑的 CSS 过渡动画旋转

】平滑的CSS过渡动画旋转【英文标题】：SmoothCSSTransitionAnimationRotation【发布时间】：2013-08-0222:37:39【问题描述】：我创建了这个小提琴来演示这个问题：http://jsfiddle.net/NfX56/动画旋转和悬停似乎可以很好地改变方向，但是当我将... 查看详情

css3动画

1.rotate:旋转45度。transform:rotate(45deg);2.skew:扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()... 查看详情

css吃豆人动画

一.Css吃豆人动画1.上半圆：两个div，内部一个圆div，外部设置宽高截取半圆外部div动画：animation:动画样式1s(时长)ease(动画先低速后快速)infinite(动画无限播放)动画样式：@keyframes：设置50%转45度，100%转0度transform-origin:50%100%：定义... 查看详情

jQuery没有动画不透明度，但会在悬停时旋转元素

】jQuery没有动画不透明度，但会在悬停时旋转元素【英文标题】：jQuerynotanimatingopacitybutwillrotateelementonhover【发布时间】：2013-03-0216:16:35【问题描述】：我一直在寻找为什么我的代码不会在悬停时将元素设置为\'opacity:1\'但会旋转... 查看详情

每次单击按钮时将 UIButton 旋转 90 度

】每次单击按钮时将UIButton旋转90度【英文标题】：RotatingaUIButtonby90degreeseverytimethebuttonisclicked【发布时间】：2016-08-1917:55:49【问题描述】：如何在并跟踪每个旋转的位置/角度？这是我到目前为止的代码，但它只旋转一次：@IBAction... 查看详情

使用 CSS3 动画将元素旋转到 360 度

】使用CSS3动画将元素旋转到360度【英文标题】：Rotateelementto360degusingCSS3Animation【发布时间】：2015-10-1908:06:21【问题描述】：我正在尝试使用CSS3创建加载器动画。代码如下：http://codepen.io/raaj-obuli/pen/RPeLer如果您查看代码，我在@key... 查看详情

在保持对齐的同时以相反的方向旋转 div 和文本？

...题描述】：所以我正在制作这个按钮，我想在悬停时设置动画。到目前为止，它工作得很好，但我正在使用的字体真棒图标在旋转时似乎会使其不对齐。基本上，我在悬停时将父div旋转了45度。为了解决这个问题，我还 查看详情