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

2022-01-22 00:00:00 image hover css css-transitions

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

I wonder If anybody knows a clever and new way how to make a transition between two background images? I know there are multiple tutorials out there just most of them are outdated and old.

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

I wonder if there is a clever and modern CSS3 way of doing something like this.

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

I have a simple logo.png set as background to a div.logo (I want it to be set as a background image not via img src). And when I hover over it I want a smooth transition to "logo-hover.png" which is the same file just in a different color.

现在有什么想法吗?

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

My approach would be this: - I create a outer container around div.logo wich position relative. I position two divs inside of it with position absolute on top of each other. The div.hover is set to display:none and if I hover it I use css3 transition to animate it's opacity.

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

Is this the only way of doing this? I'd actually love to use a pure css way where I don't have to add an additional div with the hover state to the dom itself.

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

Any ideas on that matter?

提前谢谢你.

推荐答案

使用这个

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

和

相关文章