Question

大家好我有一点问题，在我开始之前，我不得不说我的英语很难过。我制作了一张带有2张照片的桌子，其中我想要的是当有人悬停在图像上时，不透明度顺序会改变颜色（静止图片可见），我用这段代码做了：

span.rollover {
    -o-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -webkit-transition: -webkit-transform 1s;
    background: url(images/moreProcuts.png) center center no-repeat #9b1b24;
    cursor: pointer;
    height: 170px;
    width: 250px;
    position: absolute;
    z-index: 10;
    opacity: 0;
    filter: alpha(opacity=0);
}
span.rollover:hover {
    opacity: .6;
    filter: alpha(opacity=60);
    -o-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -webkit-transition: -webkit-transform 1s;
    -webkit-box-shadow: 0px 0px 4px #000;
    -moz-box-shadow: 0px 0px 4px #000;
    box-shadow: 0px 0px 4px #000;
}

但现在我想慢慢改变图片上的颜色，有没有办法用javascript或css做到这一点？谢谢！

我的工作链接显示它有效： http://uupload.ir/files/ptu8_untitled.png

Answer 1

您可以添加CSS转换：

span.rollover {
      opacity: 0;
      transition: opacity 1s ease-in-out;
}

span.rollover:hover {
      opacity: 0.6;
      transition: opacity 1s ease-in-out;
}

您可以为iOS兼容性添加-webkit前缀。

Answer 2

感谢@lonDen我改变了我的观点：

<style>
span.rollover
{
-webkit-transition: all 1000ms cubic-bezier(1.000, 0.000, 0.000, 0.995);
-moz-transition: all 1000ms cubic-bezier(1.000, 0.000, 0.000, 0.995);
-o-transition: all 1000ms cubic-bezier(1.000, 0.000, 0.000, 0.995);
transition: all 1000ms cubic-bezier(1.000, 0.000, 0.000, 0.995); /* custom */
-webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 0.995);
-moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 0.995);
-o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 0.995);
transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 0.995); /* custom */
background: url(images/moreProcuts.png) center center no-repeat #9b1b24;
cursor: pointer;
height: 170px;
width: 250px;
position: absolute;
z-index: 10;
opacity: 0;
filter: alpha(opacity=0);
}
span.rollover:hover
{
opacity: .6;
filter: alpha(opacity=60);
-webkit-transition: all 1000ms cubic-bezier(1.000, 0.000, 0.000, 0.995);
-moz-transition: all 1000ms cubic-bezier(1.000, 0.000, 0.000, 0.995);
-o-transition: all 1000ms cubic-bezier(1.000, 0.000, 0.000, 0.995);
transition: all 1000ms cubic-bezier(1.000, 0.000, 0.000, 0.995); /* custom */
-webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 0.995);
-moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 0.995);
-o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 0.995);
transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 0.995); /* custom */
-webkit-box-shadow: 0px 0px 4px #000;
-moz-box-shadow: 0px 0px 4px #000;
box-shadow: 0px 0px 4px #000;} <style/>

它完美无缺

慢慢改变图像上的颜色

2 个答案: