CSS3淡入淡出效果

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？

谢谢！

解决方法

您无法在两个背景图像之间进行转换,因为浏览器无法知道您要插值的内容.如您所见,您可以转换背景位置.如果您希望图像在鼠标悬停时淡入淡出,我认为使用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,0);
}

CSS3淡入淡出效果

解决方法

猜你在找的CSS相关文章