CSS3背景图片位置过渡答案

【问题标题】：CSS3 background image position transitionCSS3背景图片位置过渡
【发布时间】：2011-08-11 06:43:59
【问题描述】：

我想在我的网站徽标上添加 CSS3 悬停效果。容易，对吧？好吧，它有效，但不是我想要的方式。

Link to my logo

上半部分是常规状态，下半部分是:hover状态。

我有用于更改 :hover 上的背景位置的标准 CSS，但 CSS3 过渡会随着位置上下滑动图像。相反，我希望它只是淡入淡出到新位置。

在处理一张图片和两个位置时是否可以这样做，或者我必须制作两张单独的图片（这不会发生）？

【问题讨论】：

我想两个。 CSS3 不是 JS 的替代品...
我真的不明白你想要达到什么目的，你能举一个可行的例子吗（或者至少澄清一点 - 你是否希望你的图像只改变它的上半部分，或者您希望您的图像淡出并淡入新图像）？
我做了一个页面来展示我的情况。 scferg.com/logoexamples.html
您至少需要 2 个元素。第一个覆盖第二个。在第 1 次：悬停第 1 次的不透明度更改为 0 => 第 2 次显示为“淡入淡出”。您可以使用相同的背景（推荐）并且只使用背景位置。

标签： css background-image transition

【解决方案1】：

您不需要两个单独的图像，但您需要两个单独的元素来放置您的徽标。

在此处查看实时版本：http://jsfiddle.net/BdY79/

.logo {
  width: 282px;
  height: 69px;
  background: #fff url(http://scferg.com/wp-content/themes/austere/images/logo.png) 0 -69px no-repeat;
  overflow: hidden;
}

.logo img {
  background-color: #fff;
  -webkit-transition: opacity 200ms ease;
  -moz-transition: opacity 200ms ease;
  -o-transition: opacity 200ms ease;
}

.logo img:hover {
  opacity: 0;
}

实际上，您可能希望链接您的徽标，并且可以使用标签来执行此操作，因此没有额外的标记。它也会优雅地降级。

【讨论】：

【解决方案2】：

这里没有提到背景位置动画...

.box {
    display:block;
    height:300px;
    width:300px;
    background:url('http://lorempixum.com/300/300') no-repeat;
    background-position:-300px;
    -webkit-transition:background-position 1s ease;
}

.box:hover{
    background-position:0px;
}

仅限 Webkit :(

通过：http://jsfiddle.net/hfXSs/

【讨论】：

【解决方案3】：

是的，这是可能的，但您不能使用简单的过渡，您必须使用具有 4 个关键帧的 CSS 动画

0%   - opacity 1
49%  - opacity 0
50%  - move to new position, opacity 0
100% - opacity 1

【讨论】：

【解决方案4】：

https://gordonlesti.com/css-background-transitions-with-image-sprites/

<style>
    .example4 {
        background: url(sprite.png) 0px 0px no-repeat;
        position: relative;
        width: 200px;
        height: 200px;
    }
    .example4::after {
        content: "";
        background: url(sprite.png) -200px 0px no-repeat;
        opacity: 0;
        transition: opacity 0.5s;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    .example4:hover::after {
        opacity: 1;
        transition: opacity 0.5s;
    }
</style>

<div class="example4"></div>

【讨论】：