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

滚动效果是通过在 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>

等等...

其中

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

• LI get position:relative;
• 给 标记一个 height, width
• 设置 宽度 & height 为 100%，以便 和 具有相同的尺寸
• < /code> 和 获取 position:relative;。
• 为每个元素分配相同的背景图像
• 标记将具有“OFF”background-position 和 将具有“ON”背景位置。
• 对于“OFF”状态， 使用不透明度 0 对于
• “ON”:hover 状态， 使用不透明度 1
• 设置 元素上的 -webkit 或 -moz 过渡

您将能够使用过渡效果，同时仍默认为旧的背景位置交换。不要忘记插入 IE alpha 过滤器。