Question

有没有办法可以做到以下几点？

我有一个透明的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;}

现在，上面确实为背景设置了动画，它将图像平移。我想要的不是平底锅，而是淡化或溶解效果。

更新：我最终必须创建两个元素，然后分别为不透明度设置动画。这有点乱，因为我必须指定每个元素的确切边距，但我想它会起作用。感谢大家的帮助：）

Answer 1

有关此主题的最新消息：

Chrome 19及更新版支持背景图片转换：

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

其他信息： http://oli.jp/2010/css-animatable-properties/

Answer 2

您尚未指定任何代码来执行实际转换。

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;

Answer 3

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

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

Answer 4

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

Answer 5

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

不确定是否可以修复它。

Answer 6

我知道这可能有点晚了。但是我长期以来一直在努力解决同样的问题。使用透明精灵，许多解决方案似乎都不起作用。

我做的是这个

<强> HTML

<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方式＆amp;有一些编码..但似乎是我达到预期效果的唯一方法！希望那些偶然发现这一点的人可以从中找到一些帮助！

Answer 7

var min = 1,
    max = 49,
    total = 6,
    nums = [];

// For [total] times
for(var i=0; i<total; i++){
  // Generate a random number between [min] and [max]
  var num = Math.floor( Math.random() * max + min );
  // If number already there, repeat
  if( nums.indexOf(num) > -1 ){ i--; continue; }
  // Add the number to the array
  nums.push(num);
}

// Sort and show the resulting array, comma separated
alert( nums.sort(sortNumber).join(', ') );

function sortNumber(a,b) {
    return a - b;
}

Answer 8

<强> CSS： -

li { background：url（http://oakdale.squaresystem.co.uk/images/solutions.png）no-repeat left center; 背景大小：89px; 填充：54px 0 54px 130px; webkit-transition：全部0.5s线性; -moz-transition：全部0.5s线性; -o-transition：全部0.5s线性; 过渡：全部0.5s线性; }

li：hover { 背景大小：50px }

CSS在悬停时背景图像之间淡入淡出

8 个答案: