CSS3 - 在精灵图像的“背景位置”之间淡入淡出
Posted
技术标签:
【中文标题】CSS3 - 在精灵图像的“背景位置”之间淡入淡出【英文标题】：CSS3 - Fade between 'background-position' of a sprite image 【发布时间】：2013-03-31 18:15:19 【问题描述】：我想在精灵图像的“背景位置”之间淡出仅使用 CSS。我找到了很多教程，但我没有找到像这样简单的东西：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 - Fade between 'background-position' of a sprite image</title>
<style type="text/css">
div
width: 120px;
height: 60px;
background-image: url('sprite.jpg');
background-repeat: no-repeat;
background-position: 0 0;
div:hover
background-position: 0 -60px;
</style>
</head>
<body>
<div></div>
</html>
谢谢。
【问题讨论】：
您还没有设置任何淡入淡出。您可以使用 javascript 或 css3 动画来实现，具体取决于您希望支持的浏览器数量。 这是一篇关于css-tricks.com/fade-image-within-sprite主题的好文章 【参考方案1】：我找到答案了，还是谢谢。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 - Fade between 'background-position' of a sprite image</title>
<style type="text/css">
#button
float: left;
background-image: url('sprite.jpg');
background-position: 0 -60px;
background-repeat: no-repeat;
width: 120px;
height: 60px;
#button a
background-image: url('sprite.jpg');
background-position: 0 0;
background-repeat: no-repeat;
width: 120px;
height: 60px;
display: block;
text-indent: -9999px;
transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-webkit-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
#button a:hover,
#button a:focus
opacity: 0;
</style>
</head>
<body>
<div id="button"><a href="#"></a></div>
</html>
【讨论】：
【参考方案2】：您可以将CSS3 Animation 与@keyframes 一起使用
div:hover
animation: logo 2s 0 linear;
@keyframes logo
0% opacity: 1;
5% opacity: 0;
50% background-position: 0 -60px; opacity: 0;
100% background-position: 0 -60px; opacity: 1;
示例：http://jsfiddle.net/Y8W9S/
当然，现在你要调整你想要实现的时间和效果。
希望对您有所帮助或指出正确的方向。
祝你好运。
【讨论】：
【参考方案3】：所以基本上，你需要对:hover执行两件事
background-position改
fadein效果
CSS3 过渡在这种情况下不会有用。 您可以使用 CSS3 动画属性。
animation 属性接受name 的动画和持续时间。可以提供多个动画名称，以逗号分隔。
您需要定义这些动画名称。它们可以是您选择的任何字符串，但您需要定义它们。 所以考虑这个css：
div:hover
animation: fadein 10s, bp 0.5s;
-moz-animation: fadein 10s, bp 0.5s; /* Firefox */
-webkit-animation: fadein 10s, bp 0.5s; /* Safari and Chrome */
-o-animation: fadein 10s, bp 0.5s;
background-position:0 0;
@-webkit-keyframes fadein /* Safari and Chrome */
from
opacity:0;
to
opacity:1;
@-webkit-keyframes bp /* Safari and Chrome */
from
background-position:-200px 0;
to
background-position:0 0;
查看此fiddle，了解完整的浏览器支持动画
注意：它肯定不会在 IE
【讨论】：
这是一张幻灯片，不是精灵背景位置之间的渐变 @CBuzatu 现在看看我的答案！【参考方案4】：这样使用：
div
width: 120px;
height: 60px;
background-image: url('sprite.jpg');
background-repeat: no-repeat;
background-position: 0 0;
transition: background-position 1s ease;
别忘了可选的供应商前缀
编辑：
我注意到你需要淡入淡出。您尝试类似这样的解决方案：
div
background: url(foo.jpg) no-repeat 0 0 transparent;
transition: background: 1s ease;
div:hover
background: rgba(0, 0, 0, 1);
我不能试试这个，因为我是手机上的。
【讨论】：
这将滑动背景图像，而不是淡入淡出。 这不是精灵图像位置之间的淡入淡出。div 是透明的，这将显示一个白色页面，悬停时会变成黑色......我不明白你尝试了什么。以上是关于CSS3 - 在精灵图像的“背景位置”之间淡入淡出的主要内容，如果未能解决你的问题，请参考以下文章