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

Posted 2023-03-06

【中文标题】鼠标悬停时的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