0

我想在 CSS3 浏览器和非 CSS3 浏览器上悬停时动画（翻转）我的 GIF 图像，只需更改背景颜色。

我可以使用代码实现 CSS3 Flip 动画

.imageselector:hover {
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: rotate; 
    -moz-animation-duration: 2s; 
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
}
@-webkit-keyframes rotate {
    from {-webkit-transform: rotateX(0deg);}
    to {-webkit-transform: rotateX(360deg);}
}

@-moz-keyframes rotate {
    from {-moz-transform: rotateX(0deg);}
    to {-moz-transform: rotateX(360deg);}
}

和背景变化使用

.imageselector:hover { background:#FFF999; }

我想将两者结合起来，以便在支持 CSS3 的浏览器中它应该只动画，而在非 CSS3 浏览器中它应该只改变背景颜色。

4

1 回答 1

0

如果我理解您想要正确执行的操作，我将采用以下方法：将图像放入容器 div 中，当悬停触发时，该容器 div 将更改背景颜色。 

    <div class="container">
        <img src="http://1.bp.blogspot.com/-Gv648iUY5p0/UD8rqW3deSI/AAAAAAAAACA/MrG4KxFyM5A/s72-c/Fish.jpeg" />
    </div>

然后，将 CSS3 动画应用于图像。 

    * {margin:0; padding:0;}
    .container {width:100px; height:100px; background:#cde; margin:20px;}
    .container img {padding:14px; display:block; -webkit-transition:all 2s ease;}
    .container:hover {background:#abc;}
    .container:hover img {-webkit-transform:rotateX(180deg);}

支持它的浏览器会生成动画。其余的只会改变背景。这是一个简单的例子：http: //jsfiddle.net/xfnHr/

于 2013-09-03T14:10:10.570 回答