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

关键词：

【中文标题】鼠标悬停时的CSS3背景旋转动画【英文标题】：CSS3 background rotation animation in mouse hover 【发布时间】：2012-09-12 10:42:43 【问题描述】：

这是我的 div。

   #div1
        position:   absolute;
        top:        50%;
        left:       50%;
        margin-left:-100px;
        margin-top: 420px;
        width:      158px;
        height:     158px;
        background-image:url(images/background.png);
    

我需要鼠标悬停事件的背景图像旋转 360 度动画。有谁能够帮我？谢谢。

【问题讨论】：

【参考方案1】：

这是您的要求：

jsFiddle Demo

    <div id="div1">rterterrt
teteterrtetre<div id="div2">
</div></div>

.

 #div1
        position:   absolute;
        top:        50%;
        left:       50%;
        margin-left:-100px;
        /*margin-top: 420px;*/
        width:      158px;
        height:     158px;


#div2


        /*margin-top: 420px;*/
        width:      158px;
        height:     158px;
        background-image:url(http://www.commentsyard.com/cy/01/6474/Mixed%20Flowers%20and%20a%20Bear.jpg);


#div2:hover 
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: rotate; 
    -moz-animation-duration: 2s; 
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

@-webkit-keyframes rotate 
    from -webkit-transform: rotate(0deg);
    to -webkit-transform: rotate(360deg);

​

【讨论】：

这会旋转整个 div。 用户请求和我的结果有什么区别？ div 可能包含他不想旋转的文本内容。在这种情况下，您需要将内容包装在div（或另一个标签）中并以相反方向旋转它或使用绝对定位以覆盖div的伪元素的背景和而是旋转该伪元素。 不完全。文本应该在背景旋转的 div 内。更像这样dabblet.com/gist/3754605（旋转孩子以取消父母的旋转）。或者像这样（仅在 FF 中有效）dabblet.com/gist/3754578（具有伪元素和旋转伪元素的背景）。或者像这样dabblet.com/gist/3754586（具有绝对定位子元素而不是伪元素的背景）。【参考方案2】：

您不能通过 CSS（2,3 级）方式旋转背景图像。 因此，您唯一的选择是对该图像使用单独的元素，并将该元素作为一个整体进行旋转/动画处理。

但是您可以在CSS level 4 中执行此操作。

【讨论】：

【参考方案3】：

你可以使用伪元素来实现这一点

#div1
        position:   absolute;
        top:        50%;
        left:       50%;
        margin-left:-100px;
        margin-top: 420px;

#div:before 
   content: "";
   position: absolute;
   width: 158px;
   height: 158px;
   background-image:url(images/background.png);
   transition: all 1s linear;


#div:hover:before 
    transform:rotate(360deg);

【讨论】：

【参考方案4】：

仅使用 CSS 代码在 :hover 上旋转背景图像。

http://designshack.net/tutorialexamples/multiplebackgrounds/index.html

【讨论】：

取消悬停时的 CSS3 动画

...类，它在悬停时显示菜单。问题是如果用户在动画期间将鼠标悬停在菜单上，它仍然会在3秒后淡出，然后由于:hover伪类而重新出 查看详情

css3关键帧悬停动画firefox

...问题描述】：我创建了一些关键帧动画，以在纯css3中为鼠标悬停时的div设置动画。它在FIREFOX中执行的所有浏览器（googlechrome、safari、IE、opera）上都运行良好！我真的不知道为什么它不能只在Firefox中工作。动画在鼠标悬停时不... 查看详情

css3鼠标悬停图片动画

在线演示本地下载 查看详情

css3鼠标悬停图片动画

在线演示本地下载 查看详情

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

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

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

...问题描述】：所以我已经完成了一些简单的代码来当你将鼠标悬停在容器上时旋转内部元素。当鼠标悬停在容器上时，这就像我想要的那样工作，但是当鼠标不再在容器内时，旋转停止。如何完成一个完整的旋转，由鼠标悬停启... 查看详情

使用 css 动画更改悬停时的圆形背景

】使用css动画更改悬停时的圆形背景【英文标题】：Changecirclebackgroundonhoverusingcssanimation【发布时间】：2017-09-0110:00:53【问题描述】：我有一个圆圈，它的背景颜色设置为红色，我想使用css动画更改悬停时的背景，我该怎么做？... 查看详情

css3鼠标悬停边框线条动画按钮

在线演示本地下载 查看详情

不悬停时的CSS动画

...:54【问题描述】：我试图让我的徽标在悬停时变大，但当鼠标从徽标上移开时又恢复到原始大小。到目前为止，当鼠标悬停在徽标上时，徽标会增大，但是当您移开鼠标时，徽标只会跳回原始大小，而不是逐渐缩小，效果相同。... 查看详情

html5/css3鼠标悬停动画菜单按钮

在线演示本地下载 查看详情

使用 CSS3 悬停时的背景图像不透明度过渡

】使用CSS3悬停时的背景图像不透明度过渡【英文标题】：background-imageopacitytransitiononhoverwithCSS3【发布时间】：2012-05-2801:16:01【问题描述】：当用户将光标放在链接上时，我正在尝试使用背景图像不透明度（从0到100%）过渡。我有... 查看详情

悬停时的 jQuery 动画 |非常快的传球，停止动画

...件时在图像顶部创建叠加层，然后为两个图标设置动画。鼠标移开时，它会再次为图标设置动画，然后淡出覆盖层。虽然动画很好，但问题出在图标上。在鼠标过快的过 查看详情

CSS3 动画脱离 :hover

...:28:27【问题描述】：我正在设置一个简单的动画，当您将鼠标悬停在图像上时会显示一些附加信息。jQuery备份部分已编写并且工作正常，但我遇到的问题是当用户悬停时让CSS3动画反转。因此，当您将鼠标悬停在其中时效果很好... 查看详情

悬停时的 Jquery 动画

...】：2010-12-1708:25:07【问题描述】：我有一个文本，当我将鼠标悬停在它上面时，我想对其进行动画处理例如：$(".tabbtr").hover(function()$(this).find("td#headie").animate(marginLeft:\'9px\',\'slow\'),function()$(this).find( 查看详情

CSS3：动画精灵+悬停过渡

...通过CSS3关键帧无限“跳动”的球我希望球变大并在我将鼠标悬停在它上面时保持这种状态我希望当我将鼠标移开并保持脉动时球再次变小（当然，所有的过渡都需要平滑）。这是我混 查看详情

悬停关键帧 CSS3 缓入

...帧为简单的旋转设置动画。这一切都很好，但我讨厌它在鼠标关闭时突然停止。我试过了：-webkit-animation-timing-function:ease-in-out;但这仅适用于帧而不是整个动画。这就是我所拥有的，任何帮助表示赞赏。@-webkit-keyfr 查看详情

更改嵌套 div 内鼠标悬停时的图层颜色

】更改嵌套div内鼠标悬停时的图层颜色【英文标题】：Changecoloroflayersonmouseoverinsideanesteddiv【发布时间】：2018-11-2319:03:26【问题描述】：我有以下html代码，我正在尝试更改div标签的背景颜色，这样当我将鼠标悬停在文本上时，背... 查看详情

悬停时继续 CSS3 关键帧动画/悬停时停止重复

】悬停时继续CSS3关键帧动画/悬停时停止重复【英文标题】：ContinueCSS3KeyframesAnimationonHover/StopRepeatonHover【发布时间】：2018-03-0902:00:36【问题描述】：我设置了CSS3动画，我只想更改悬停时的框阴影颜色。但是，当我这样做时，动... 查看详情