CSS淡出背景图像之间的悬停

是否有一种方法可以做到以下几点?

我有一个透明的png精灵，左边显示一张标准图片，右边显示一张悬停状态的图片。

是否有一种方法，我可以有图像从左边的图像淡出到右边的图像:只使用css3过渡悬停?我尝试了以下方法，但它不起作用:

li{-webkit-transition:all 0.5s linear; -moz-transition:all 0.5s linear; -o-transition:all 0.5s linear; transition:all 0.5s linear;}
li{background:url(/img/sprites.png) 0 -50px no-repeat;}
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat;}

现在，上面的动画背景，它平移图像。我想要的是淡化或溶解效果，而不是平移。

UPDATE:我最终不得不创建两个元素，只是单独动画不透明度。这有点乱，因为我必须指定每个元素的精确边距，但我想这是可行的。谢谢大家的帮助:)

关于这个话题的最新消息:

Chrome 19及更新版本支持背景-图像过渡:

演示:http://dabblet.com/gist/1991345

额外的信息:http://oli.jp/2010/css-animatable-properties/

您还没有指定任何代码来执行实际的转换。

http://css3.bradshawenterprises.com/cfimg1/

在你的悬停样式中试试:

-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out; 
transition: opacity 1s ease-in-out;

看看这个:http://jsfiddle.net/j5brM/1/

我认为这符合你所有的需要，而且不那么复杂。

我不认为你可以在CSS中改变背景图像的不透明度，所以除非你有两个单独的背景图像元素(一个用于精灵的每个位置)，并在悬停时改变它们的不透明度，我认为你被卡住了

li{background:url(/img/sprites.png) 0 -50px no-repeat; background:rgba(80, 125, 200, 0.55);}
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat; background:rgba(100, 125, 175, 0);}

应为

li{background:url(/img/sprites.png) 0 -50px no-repeat; background-color:rgba(80, 125, 200, 0.55);}
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat; background-color:rgba(100, 125, 175, 0);}

不确定这是否修复了它。

我知道这可能有点晚了。但我也为同样的问题挣扎了很长时间。同样，对于透明精灵，许多解决方案似乎也不起作用。

我所做的是

<div class="sprite-one">
  <span class="foo"></span><span class="zen"></span>
</div>

CSS

.sprite-one { height: 50px width: 50px } .sprite-one span { width: 50px; height: 50px; display: block; position: absolute; } .foo, .zen { background-image: url(sprites.png) no-repeat; -webkit-transition: opacity .6s ease-in-out; -moz-transition: opacity .6s ease-in-out; -o-transition: opacity .6s ease-in-out; transition: opacity .6s ease-in-out; } .foo { background-position: 0 0; opacity: 1; } .zen { background-position: -50px 0; opacity: 0; } .sprite-one:hover .foo { opacity: 0; } .sprite-one:hover .zen { opacity: 1; }
这是一个纯css方式&有一点很多的编码…但似乎是我达到预期效果的唯一方法!希望那些偶然发现这个问题的人能从中找到一些帮助!

<li class="image transition"></li> css: .image{ background-image: url("some/file/path.png"); background-repeat: no-repeat; width: XXpx; height: XXpx; background-position: center center; background-size: cover; } /* DRY */ .transition{ transition: background 0.6s; -webkit-transition: background 0.6s; } .image:hover{ background-image: url("some/file/path_hoverImage.png"); }

CSS:-

李{背景:url(http://oakdale.squaresystem.co.uk/images/solutions.png)不重复左中心;background-size: 89 px;填充:54px 0 54px 130px;webkit-过渡:所有0.5s线性;-moz-transition:所有0.5s线性;-o型过渡:均为0.5s线性;过渡:均为0.5s线性;}
李:{徘徊background-size: 50 px}

相关内容

最新更新

热门标签：