Question

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

它的上半部分是常规状态，下半部分是：悬停状态。

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

当处理一个图像和两个位置时，这是否可行？或者我是否必须制作两个单独的图像（这不会发生）？

Answer 1

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

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

在实践中，您可能想要链接您的徽标，并且您可以使用标记来执行此操作，因此没有额外的标记。它也会优雅地降级。

Answer 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/

更多信息：http://css-tricks.com/parallax-background-css3/

Answer 3

是的，但是你不能使用一个简单的过渡来使用带有4个关键帧的CSS动画

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

Answer 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>

CSS3背景图像位置转换

4 个答案: