Используйте CSS3 переходы с градиентным фоном - PullRequest
Новая
       34

Используйте CSS3 переходы с градиентным фоном

200 голосов
/ 01 июля 2011

Я пытаюсь перейти при наведении курсора мыши на миниатюру, чтобы при наведении фоновый градиент исчез. Переход не работает, но если я просто изменил его на значение rgba(), он работает нормально. , Градиенты не поддерживаются? Я тоже пытался использовать изображение, оно тоже не будет переходить.

Я знаю, что это возможно, как в другом посте кто-то сделал это, но я не могу понять, как именно. Любая помощь> Вот несколько CSS для работы: 

#container div a {
  -webkit-transition: background 0.2s linear;
  -moz-transition: background 0.2s linear;
  -o-transition: background 0.2s linear;
  transition: background 0.2s linear;
  position: absolute;
  width: 200px;
  height: 150px;
  border: 1px #000 solid;
  margin: 30px;
  z-index: 2
}

#container div a:hover {
  background: -webkit-gradient(radial, 100 75, 100, 100 75, 0, from(rgba(0, 0, 0, .7)), to(rgba(0, 0, 0, .4)))
}

Ответы [ 15 ]

1 голос
/ 27 октября 2013

Я использую это на работе :) IE6 + https://gist.github.com/GrzegorzPerko/7183390

Не забудьте о <element class="ahover"><span>Text</span></a>, если вы используете текстовый элемент. 

.ahover {
    display: block;
    /** text-indent: -999em; ** if u use only only img **/
    position: relative;
}
.ahover:after {
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: all 0.5s ease 0s;
    width: 100%;
    z-index: 1;
}
.ahover:hover:after {
    opacity: 1;
}
.ahover span {
    display: block;
    position: relative;
    z-index: 2;
}
1 голос
/ 25 июля 2013

Попробуйте использовать: до и: после (то есть 9 +) 

#wrapper{
    width:400px;
    height:400px;
    margin:0 auto;
    border: 1px #000 solid;
    position:relative;}
#wrapper:after,
#wrapper:before{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    content:'';
    background: #1e5799;
    background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));
    background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    opacity:1;
    z-index:-1;
    -webkit-transition: all 2s ease-out;
    -moz-transition: all 2s ease-out;
    -ms-transition: all 2s ease-out;
    -o-transition: all 2s ease-out;
    transition: all 2s ease-out;
}
#wrapper:after{
    opacity:0;
    background: #87e0fd;
    background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0));
    background: -webkit-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    background: -o-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    background: -ms-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    background: linear-gradient(to bottom, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
}
#wrapper:hover:before{opacity:0;}
#wrapper:hover:after{opacity:1;}
1 голос
/ 06 августа 2012

Как указано.Градиенты в настоящее время не поддерживаются переходами CSS.Но в некоторых случаях вы можете обойти это, установив один из цветов на прозрачный, чтобы фоновый цвет какого-либо другого элемента обертки просвечивал, и вместо этого переходите.

0 голосов
/ 26 июля 2017

Я хотел, чтобы div отображался как трехмерная сфера и переходил через цвета.Я обнаружил, что цвета градиента фона не переходят (пока).Я поместил фон радиального градиента перед элементом (используя z-index) с переходным сплошным фоном. 

/* overlay */
z-index : 1;
background : radial-gradient( ellipse at 25% 25%, rgba( 255, 255, 255, 0 ) 0%, rgba( 0, 0, 0, 1 ) 100% );

, затем div.ball под: 

transition : all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);

, затем изменилцвет фона div.ball и вуаля!

https://codepen.io/keldon/pen/dzPxZP

0 голосов
/ 06 января 2015

Не повредит опубликовать другое представление, так как до сих пор нет официального способа сделать это.Написал легкий плагин jQuery, с помощью которого вы можете определить радиальный градиент фона и скорость перехода.Это базовое использование затем позволит ему исчезнуть, оптимизированный с помощью requestAnimationFrame (очень плавный): 

$('#element').gradientFade({

    duration: 2000,
    from: '(20,20,20,1)',
    to: '(120,120,120,0)'
});

http://codepen.io/Shikkediel/pen/xbRaZz?editors=001

Сохраняет исходный фон и все свойства без измененийТакже есть отслеживание выделения в качестве настройки:

http://codepen.io/Shikkediel/pen/VYRZZY?editors=001

Страница:
...