CSS3褪色效果

Question

a {
    float: left;
    width: 32px;
    height: 32px;
    text-align: left;
    text-indent:-9999px;
    background: url('../img/button.png') no-repeat 0 0;

    -webkit-transition: background 300ms ease-in 2s; /* property duration timing-function delay */
    -moz-transition: background 300ms ease-in 2s;
    -o-transition: background 300ms ease-in 2s;
    transition: background 300ms ease-in 2s;


    -webkit-transition-property: background;
    -webkit-transition-duration: 300ms;
    -webkit-transition-timing-function: ease-in;
    -webkit-transition-delay: 100ms;

    -moz-transition-property: background;
    -moz-transition-duration: 300ms;
    -moz-transition-timing-function: ease-in;
    -moz-transition-delay: 100ms;

    -o-transition-property: background;
    -o-transition-duration: 300ms;
    -o-transition-timing-function: ease-in;
    -o-transition-delay: 100ms;

    transition-property: background;
    transition-duration: 300ms;
    transition-timing-function: ease-in;
    transition-delay: 100ms;

}

a:hover {
    background:position: 0 -32px;
}

。

谢谢！

Answer 1

您无法在两个背景图像之间过渡，因为浏览器无法知道您要插值的内容。正如您发现的那样，您可以过渡背景位置。如果您希望图像逐渐消失，我认为使用CSS过渡进行操作的最佳方法是将图像放在包含的元素上，然后将背景颜色动画为在链接本身上透明：

span {
    background: url(button.png) no-repeat 0 0;
}
a {
    width: 32px;
    height: 32px;
    text-align: left;
    background: rgb(255,255,255);

    -webkit-transition: background 300ms ease-in 200ms; /* property duration timing-function delay */
    -moz-transition: background 300ms ease-in 200ms;
    -o-transition: background 300ms ease-in 200ms;
    transition: background 300ms ease-in 200ms;
    }
a:hover {
    background: rgba(255,255,255,0);
}

Answer 2

滚动效果是通过指定CSS中的通用“背景”属性而不是更具体的背景图像来引起的。通过设置背景属性，动画将在所有属性之间过渡。背景色，背景图像，背景位置..等，从而导致滚动效果。

例如

a {
-webkit-transition-property: background-image 300ms ease-in 200ms;
-moz-transition-property: background-image 300ms ease-in 200ms;
-o-transition-property: background-image 300ms ease-in 200ms;
transition: background-image 300ms ease-in 200ms;
}

Answer 3

有可能使用以下结构：

<li><a><span></span></a></li>
<li><a><span></span></a></li>

ETC...

在哪里 <li> 包含一个 <a> 如上图所示，包含跨度的锚标签。然后插入以下CSS：

• 李得到 position: relative;
• 给 <a> 标记 height, width
• 放 <span> width & height 到100％，所以两者都 <a> 和 <span> 具有相同的维度
• 两个都 <a> 和 <span> 得到 position: relative;.
• 为每个元素分配相同的背景图像
• <a> 标签将具有“关闭” background-position, ，和 <span> 将有“ on” background-poisiton.
• 对于“关闭”状态使用不透明度0 <span>
• 对于“ on” :hover 国家使用不透明度1 <span>
• 设置 -webkit 或者 -moz 过渡 <span> 元素

您将有能力使用过渡效果，同时仍默认为旧 background-position 交换。不要忘记插入IE alpha滤波器。