慢慢改变图像上的颜色

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

：我做了一个表2张的图片，在这，我想，当图像上某一个悬停颜色会改变（静止图像可见）由不透明顺序，我用这个代码做了它但现在我想慢慢改变图片上的颜色，有什么办法可以用javascript或css来做到这一点？谢谢！

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

来源

2015-09-26 mohammad_hero15

是否也能显示你正在使用的相关HTML？理想情况下，一些图像（可在互联网上获得）显示代码“正在工作”？ –

http://matthewlein.com/ceaser/ - 使用这个构造函数来创建动画。尽可能慢。 – IonDen

@lonDen谢谢你，真的有用，它的帮助:) –

您可以添加CSS过渡：

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

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

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

来源

2015-09-26 14:24:37

感谢@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/>

和它完美的作品

来源

2015-09-26 14:44:02

慢慢改变图像上的颜色

回答

相关问题