Question

我将两个图像放在一起（一个是黑白的，另一个是彩色的），并创建了一个CSS转换，其中一个图像的不透明度降低而另一个图像的不透明度增加。结果是color on hover effect。

我遇到了一个问题：在转换期间的某个时刻，您可以稍微看一下图像，表明不透明度的转换不是线性的，即使“transition-timing-function”属性设置为线性的。

如果涉及某种二次宽松，我会理解为什么会这样，但是应该没有？

（我之所以用纯CSS接近这个原因是因为我尚未完全解决JQuery问题）

关于如何更好地实现此功能的任何想法？

#container { width: 210px; height: 150px; display:block; border: 4px solid #ccc; position:relative; overflow:hidden; margin: 10px 0 0 10px;}

.image { width: 210px; height: 150px; display:block; position:absolute; left: 0px; top:0px; }

#dbw { 
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    background: url("http://oi42.tinypic.com/x0y2ky.jpg"); 
    zoom: 1;
    filter: alpha(opacity=100);
    opacity: 1;
}

#dco { 
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    background: url("http://oi40.tinypic.com/28gwcrb.jpg"); 
    zoom: 1;
    filter: alpha(opacity=0);
    opacity: 0;
}

#container:hover #dbw { 
    filter: alpha(opacity=0); 
    opacity: 0; 
    transform: scale(1.1);
    -ms-transform: scale(1.1); 
    -webkit-transform: scale(1.1);
}

#container:hover #dco { 
    filter: alpha(opacity=100); 
    opacity: 1; 
    transform: scale(1.1);
    -ms-transform: scale(1.1); 
    -webkit-transform: scale(1.1);
}

Answer 1

问题不在于过渡不是线性的，只是如果你把两个非不透明的图像放在一起，背景总是部分可见。

例如，如果过渡肉在中间，两个图像都是50％不透明。底部图像覆盖了50％的背景，顶部图像覆盖了剩余50％背景的50％，留下了25％的背景。

让底部图像保持不透明，让顶部图像在转换过程中接管：

http://jsfiddle.net/qvcRf/4/

即。删除底部图像上的不透明度转换：

#container:hover #dbw { 
  transform: scale(1.1);
  -ms-transform: scale(1.1); 
  -webkit-transform: scale(1.1);
}

淡化一个图像而另一个图像在不透明度上使用CSS过渡不顺畅吗？

1 个答案: