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：

• 李得到position: relative;
• 给<a>标签height，width
• 集<span>width & height到100％，这样既<a>和<span>具有相同的尺寸
• 两个<a>和<span>得到position: relative;。
• 分配相同的背景图像的每个元素
• <a>标签将具有“OFF” background-position，并且<span>将具有“ON” background-poisiton。
• 为 'OFF' 状态使用不透明度为0 <span>
• 为 'ON' :hover状态使用不透明1 <span>
• 设置<span>元素的-webkit或-moz过渡

你必须在仍旧违约旧版background-position交换时使用过渡效果的能力。不要忘记插入IE alpha过滤器。

Answer 3

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