CSS3背景图像位置转换

我想在我的网站徽标上使用CSS3悬停效果。很简单，对吧？它的工作原理，但不是我想要的方式。CSS3背景图像位置转换

Link to my logo

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

我有用于更改背景位置的标准CSS：hover，但CSS3过渡将图像上下滑动并显示位置。相反，我希望它淡入淡出到新的位置。

这是可能的，当处理一个图像和两个位置，或者我将不得不做两个单独的图像（这是没有发生）？

来源

2011-04-22 Sean

我想两项。 CSS3不是JS的替代品... – Blender 2011-04-22 23:20:16

我不太了解什么你是否想要实现，你是否可以给出一个工作的例子（或者至少澄清一点 - 你想让你的图像只改变它的上半部分，或者你希望你的图像淡出和淡入一个新的图像）？ – Maverick 2011-04-22 23:47:29

我做了一个页面来演示我的情况。 http://scferg.com/logoexamples.html – Sean 2011-04-23 02:30:39

是的，它是可能的，但你不能用一个简单的过渡，你将不得不使用一个CSS动画与4个关键帧

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

来源

2011-04-22 23:43:06

你不需要两个单独的图像，但你需要两个独立的元素来定位你的标志。

见真人版在这里：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; 
}

在实践中，你可能要链接的标志，你可以使用标签来做到这一点，所以没有额外的标记。它也优雅地退化。

来源

2011-04-24 03:24:54 Duopixel

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

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

来源

2012-06-04 23:27:28 Foxinni

CSS3背景图像位置转换

回答

相关问题