图片替代和使用CSS3过渡？(Image substitution and transition w

我不知道如果有人知道一个聪明的和新的方式如何使两个背景图像之间的过渡？ 我知道有多个教程在那里只是他们大多是过时的老。

我不知道是否有做这样的事情的聪明和现代CSS3的方式。

我有一个简单logo.png设置为背景的div.logo （我希望它通过不被设置为背景图片img src ）。 当我在它悬停我希望有一个平稳过渡到“标志，hover.png”，这是相同的文件只是在一个不同的颜色。

任何想法如何做到这一点越来越大呢？

我的做法是这样的： -我前后创建外部容器div.logo相对至极位置。 我放置两个div里面它与彼此顶部的绝对位置。 该div.hover设置为display:none ，如果我将鼠标悬停它，我使用CSS3过渡动画它的不透明度。

这是这样做的唯一途径？ 其实我喜欢使用纯CSS的方式，我没有与悬停状态到DOM本身添加一个额外股利。

关于该问题的任何想法？

先感谢您。

Answer 1:

用这个

#home .stripes, #home .stripes:hover a {
    text-indent: -9999px;
    width: 116px;
    height: 128px;
    margin: 50px 0px 0px 56px;
    float:left;
    padding: 0;
    background:url('http://www.clipartpal.com/_thumbs/024/christmas/christmas_024_02_tns.png');
}
#home .stripes a {
    background:url('https://secure.10foldsolutions.com/ecommerce/images/9/products/29197.jpg');
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
}
#home .stripes a:hover, #home .stripes a:focus {
    background:url('https://secure.10foldsolutions.com/ecommerce/images/9/products/29197.jpg');
    opacity: 0;
}

和

Answer 2:

我其实只是想出了这个自己的解决方案。

我就想办法有一个形象出现的工作，如果它是一个精灵，但保持它超级简单。

HTML：

<div class="facebookicon">
    <a href="#!"><img src="http://example.com/some.png"></a>
</div>

CSS：

.facebookicon img {
    background: #fff;
    transition:  background 400ms ease-out;
}

.facebookicon img:hover {
    background: #3CC;
    transition:  background 400ms ease-in;
}
/* you need to add various browser prefixes to transition */
/* stripped for brevity */

在这里你可以看到它：

http://jsfiddle.net/mattmagi/MpxBd/

Answer 3:

我认为这是你想要什么： DEMO。

基本上它是像你说的使用过渡：

CSS标记：

.imagesTest {
    position:relative;
    height:200px;
    width:300px;
}
.imagesTest img {
    position:absolute;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

.imagesTest img.top:hover {
    opacity:0;
}​

HTML标记：

<div class="imagesTest">
    <img class="bottom" src="some/image" />
    <img class="transition" src="some/image" />
</div>​

欲了解更多信息，请更多的这方面的例子

文章来源: Image substitution and transition with css3?