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

.. 目前它具有向上/向下滚动效果，但我希望背景随着渐变效果而变化，我应该在 CSS 中更改什么？

谢谢！

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

有可能，使用下面的结构：

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

等等……

<li> 包含一个 <a> 锚标记，其中包含如上所示的跨度。然后插入以下css：

• LI 得到position: relative;
• 给<a>标签一个height，width
• 将<span> width & height 设置为 100%，以便 <a> 和 <span> 具有相同的尺寸
• <a> 和 <span> 都得到 position: relative;。
• 为每个元素分配相同的背景图片
• <a> 标记将具有“OFF”background-position，<span> 将具有“ON”background-poisiton。
• 对于“关闭”状态，使用不透明度 0 表示 <span>
• 对于“开启”:hover 状态，<span> 使用不透明度 1
• 在<span> 元素上设置-webkit 或-moz 过渡

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

Answer 3

滚动效果是通过在 CSS 中指定通用的“背景”属性而不是更具体的背景图像引起的。通过设置背景属性，动画会在所有属性之间进行过渡..Background-Color, Background-Image, Background-Position.. 等从而产生滚动效果..

例如

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