CSS3淡入效果 [英] CSS3 Fade Effect

问题描述

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

..目前它有向上/向下滚动效果，

解决方案

/ div>

您无法在两个背景图片之间切换，因为浏览器无法知道您要插入的内容。正如你已经发现的，你可以转换背景位置。如果你希望图像在鼠标悬停，我认为使用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）; 
} 
  

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

.. currently it has scroll up/down effect, but I want the background to change with fade effect, what should I change in the CSS?

Thanks!

解决方案

You can't transition between two background images, as there's no way for the browser to know what you want to interpolate. As you've discovered, you can transition the background position. If you want the image to fade in on mouse over, I think the best way to do it with CSS transitions is to put the image on a containing element and then animate the background colour to transparent on the link itself:

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

这篇关于CSS3淡入效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！