使用 css3 进行图像替换和过渡？

Posted 2023-03-06

【中文标题】使用 css3 进行图像替换和过渡？

【英文标题】：Image substitution and transition with css3?

【发布时间】：2012-07-10 02:18:21

【问题描述】：

我想知道是否有人知道如何在两个背景图像之间进行转换的聪明而新的方法？我知道那里有很多教程，只是其中大部分都过时了。

我想知道是否有一种聪明而现代的 CSS3 方式来做这样的事情。

我有一个简单的 logo.png 设置为div.logo 的背景（我希望它不是通过img src 设置为背景图像）。当我将鼠标悬停在它上面时，我希望平滑过渡到“logo-hover.png”，这是同一个文件，只是颜色不同。

现在有什么想法吗？

我的方法是这样的： - 我在div.logo 周围创建了一个外部容器，位置相对。我在其中放置两个 div，绝对位置彼此重叠。 div.hover 设置为display:none，如果我悬停它，我会使用 css3 过渡来为其不透明度设置动画。

这是唯一的方法吗？ 我实际上很喜欢使用纯 css 方式，我不必向 dom 本身添加具有悬停状态的额外 div。

关于这件事有什么想法吗？

提前谢谢你。

【参考方案1】：

我认为这就是你想要的： 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>​

欲了解更多信息，请查看更多examples here

【参考方案2】：

使用这个

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

和

【参考方案3】：

实际上，我自己只是想出了一个解决方案。

我想要一种让图像看起来像精灵一样工作的方法，但要保持超级简单。

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/