CSS3背景图像位置转换

Question

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

链接到我的徽标

它的上半部分是常规状态,下半部分是:悬停状态.

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

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

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

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

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