2

我有一个关于 CSS3 动画/变换的问题。通常，我总能找到解决 CSS3 的方法——因为它非常简单，但这一直给我带来麻烦。

我所拥有的是一张加号的图片。当用户将鼠标悬停在加号上时，它会旋转 360 度，图片变为减号。一切都运行良好，除了动画结束时它会迅速恢复为加号；我希望它保持在减号上，直到鼠标悬停，然后它可以回到加号。

这是我的代码：

#lock-screen #time-section .unlock {
    cursor: pointer;
    display: block;
    height: 22px;
    width: 23px;
    background-image: url('../images/metro_icon_pack/plus.png');
    background-repeat: no-repeat;
    margin-left: -15px;
    margin-top: 5px;
}

#lock-screen #time-section .unlock:hover {
    animation: rotate 1s;
    -o-animation: rotate 1s;
    -ms-animation: rotate 1s;
    -moz-animation: rotate 1s;
    -webkit-animation: rotate 1s;
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        background-image: url('../images/metro_icon_pack/minus.png');
    }
}

现在，我意识到我只是为基于 WebKit 的浏览器（Chrome 和 Safari）提供代码。那是因为我正在 Chrome 中对其进行测试，稍后我会在获得它后添加对其他浏览器的进一步支持。

感谢您的帮助，伙计们！

4

1 回答 1

1

我会将减号背景图像放在下面#lock-screen #time-section .unlock:hover，然后添加一秒钟的背景图像过渡。

此外，除了使用 0%、100% 之外，您还可以使用 from、to...

像：

#lock-screen #time-section .unlock:hover {
background-image: url('../images/metro_icon_pack/minus.png');
-webkit-transition: background-image 1s;
/* Other -vendor-transitions go here */
}

演示。

我也会使用变换方法而不是动画，只使用过渡（您还可以将元素旋转回加号）...
Demo。

如果您不想将元​​素旋转回加号，只需将 添加-webkit-transition到悬停状态即可。

演示。

于 2012-10-28T03:16:43.517 回答