Question

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

<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;}

Answer 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是过渡效果的类型。请参阅updated fiddle。

Answer 2

这样的东西？ 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 /等的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 {

如何在精灵图像上创建css过渡淡出？

2 个答案: