2

我正在为我的一些菜单项使用精灵图像链接，使用背景位置定位。我想在悬停时做出淡入淡出的效果。我设置了一个

演示http://jsfiddle.net/6q2hH/

<li class="mobileimg"><a href="#" class="mobileimage" title="Go Mobile"></a></li>

    li.mobileimg .mobileimage{
     display:block;
     background:transparent url('http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png')no-repeat;
     width: 30px;
     height:30px;
     margin-top:9px;
     margin-left:3px;
    }

    li.mobileimg .mobileimage:hover {background-position:0px -29px;}
4

2 回答 2

1

首先，您需要将不透明度设置为.mobileimage:hover小于 1。为了跨浏览器兼容性，请尝试：

.mobileimage:hover {
    filter: alpha(opacity=50);
    -khtml-opacity: .5;
    -ms-filter: "alpha(opacity=50)";
    -moz-opacity: .5;
    opacity: .5;
}

然后，要创建实际的过渡效果，您需要告诉.mobileimage在不透明度上创建过渡，而不是opacity: .5立即切换到：

.mobileimage {
    -webkit-transition: opacity 500ms ease;/* Saf3.2+, Chrome */
    -moz-transition: opacity 500ms ease;   /* FF4+ */
    -ms-transition: opacity 500ms ease;    /* IE10? */
    -o-transition: opacity 500ms ease;     /* Opera 10.5+ */
    transition: opacity 500ms ease;     
}

500ms是不透明度改变需要多长时间，ease是过渡效果的类型。请参阅更新的小提琴。

于 2013-03-31T13:46:27.903 回答
0

像这样的东西？http://jsfiddle.net/6q2hH/3/

li.mobileimg .mobileimage{
 display:block;
 background:transparent url('http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png')no-repeat;
 width: 30px;
 height:30px;
 margin-top:9px;
 margin-left:3px;
}

li.mobileimg .mobileimage:hover {
    background-position:0px -29px;
    -webkit-animation-name: fadingItOut;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes fadingItOut {
    0% {
        opacity: 1.0;
    }
    100% {
        opacity: 0.0;
    }
}
}

您可以根据需要调整行为。查看Mozilla MDN了解更多信息。

还要记住，这只是 Safari/Chrome/Chromium/etc 的 WebKit 示例。其他前缀是（所有动画标签都需要前缀，这只是一个例子）；

animation-name // Vanilla (general CSS)
-moz-animation-name // Firefox
-o-animation-name // Opera
-ms-animation-name // Internet Explorer

对于框架；

@keyframes fadingItOut {
@-moz-keyframes fadingItOut {
@-o-keyframes fadingItOut {
@-ms-keyframes fadingItOut {
于 2013-03-31T13:05:10.303 回答