CSS переход с градиентом фона - PullRequest
Новая
       48

CSS переход с градиентом фона

7 голосов
/ 17 октября 2011

Я изучаю анимации / переходы с помощью CSS3, но в этом коде переход не работает ... почему?

HTML: 

<div id="test">
</div>

CSS: 

#test {
    background-color: #333;
    background-image: -webkit-linear-gradient(top, #333, #666);
    width: 100px;
    height: 100px;
    -webkit-transition: background 1s linear;
}

#test:hover {
    background-image: -webkit-linear-gradient(top, #666, #999);
}

http://jsfiddle.net/LLRfN/

Ответы [ 4 ]

2 голосов
/ 17 октября 2011

Это работает для меня, как и предполагалось.Пара вещей, это будет работать только в Google Chrome, если вы хотите, чтобы он работал в других браузерах:

Вот генератор

Вот объяснение

edit

Извините, я не понял, что там есть свойство transition.После того, как я поработал с гуглом и попробовал кое-что сам, довольно ясно, что переходы на фоновые градиенты невозможны ... пока.

Вот хорошая статья о том, как заставить его работать снемного взломать

http://nimbupani.com/some-css-transition-hacks.html

0 голосов
/ 26 января 2014

Градиентный переход может быть сделан с небольшим количеством "обмана". Я определенно не профессионал в css (и я здесь новичок, так что не ненавидите меня быстро: D), но просто помещаю делители друг на друга, один с непрозрачностью 1, а второй с 0. (Для каждого элемента div установлены разные градиенты). При наведении курсора измените непрозрачность с 1 на 0 и наоборот.

Установите функцию синхронизации, и, тем не менее, эти элементы делятся друг на друга, а свойство z-index сделает все остальное. (Оптимизировано для Safari) Может быть, новичок, но это работает (удивительно) отлично: 

 #divgradient1
    {
     z-index:-1;
     height:100px;
     background: -webkit-linear-gradient(90deg, red, blue);
     background: -o-linear-gradient(90deg, red, blue);
     background: -moz-linear-gradient(90deg, red, blue); 
     background: linear-gradient(90deg, red, blue);

     opacity:1;
     transition:background,opacity,z-index;
     -webkit-transition:background,opacity,z-index ;
     transition-duration: 1s;
     -webkit-transition-duration: 1s;
    }

 #divgradient1:hover{
    z-index:-1;
    opacity:0;        
    transition:background,opacity,z-index;
    -webkit-transition:background,opacity,z-index;
    transition-duration: 1s;
    -webkit-transition-duration: 1s;
    }


 #divgradient2:hover{
    opacity:1;
    z-index:2;
    background: -webkit-linear-gradient(-90deg, red, blue);
    background: linear-gradient(-90deg, red, blue);
    transition:background,opacity,z-index;
    -webkit-transition:background,opacity,z-index;
    transition-duration: 1s;
    -webkit-transition-duration: 1s; 
    }


 #divgradient2
    {
    z-index:1;
    opacity:0;
    height:100px;        
    background: -webkit-linear-gradient(-90deg, red, blue);
    background: linear-gradient(-90deg, red, blue);
    transition:background,opacity,z-index;
    -webkit-transition:background,opacity,z-index;
    transition-duration: 1s;
    -webkit-transition-duration: 1s;
    }

и все, что должно выглядеть как div: 

    <div id="divgradient1" style="position:absolute;width:100px;"></div>
    <div id="divgradient2" style="position:absolute;width:100px;"></div>
0 голосов
/ 17 октября 2011

Это сработало для меня, также я могу указать вам на площадку CSS3, где вы можете проверить это на лету

Площадка CSS3

0 голосов
/ 17 октября 2011

работает нормально на меня. вы обернули файл css тегом? 

<style>
#test {
background-color: #333;
background-image: -webkit-linear-gradient(top, #333, #666);
width: 100px;
height: 100px;
-webkit-transition: background 1s linear;
}

#test:hover {
background-image: -webkit-linear-gradient(top, #666, #999);
}
</style>
<div id="test">
</div>
...