0

我创建了一个简单的 CSS 过渡来在此页面（光盘菜单）中将div 旋转 360 度，但它似乎只适用于 Firefox Nightly。我还在 Firefox 15（发布版本）和 Google Chrome 中进行了尝试。两者都只是将图像向左移动一点，并在覆盖的文本周围显示一些图形伪影。这是与光盘相关的 CSS（旋转图像实际上是在真实菜单 div 中设置大小的空 div）：

#menuDisco {
    transition: all 0.8s;
    -webkit-transform: rotate(0deg);  
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    background: url("img/disco.png");
    background-size: 100% 100%;
    position: relative;
    top: 0%; left: 0%;
    width: 100%; height: 100%;
    color: rgba(0,0,0,0);
}
#menu:hover #menuDisco {
    transition: all 0.8s;
    -webkit-transform: rotate(360deg);  
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}
4

1 回答 1

0

确保包括所有前缀。 在 FF16 和 Opera 12.5 中，过渡没有前缀。（-ms-transition 没有用，因为 IE9 不支持它并且 IE10 没有前缀）。

-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-o-transition: all 0.8s;
transition: all 0.8s;

您也不需要第二个样式声明中的转换规则，因为它与第一个相同。

于 2012-09-30T16:10:12.050 回答