慢慢改變圖像上的顏色

-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

慢慢改變圖像上的顏色

回答

相關問題