изменение цвета на изображении медленно

-2

Привет, у каждого есть небольшая проблема, Прежде чем я начну, я должен сказать, что мой английский плохой извините. Я сделал таблицу с 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

источник

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

изменение цвета на изображении медленно

ответ

Смежные вопросы