Я пытаюсь перейти при наведении курсора на миниатюру, чтобы при наведении фоновый градиент исчез. Переход не работает, но если я просто изменил его на 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)))
}
Ответы:
Градиенты еще не поддерживают переходы (хотя текущая спецификация говорит, что они должны поддерживать как градиент, так и градиентные переходы через интерполяцию).
Если вам нужен эффект постепенного появления с градиентом фона, вам нужно установить непрозрачность для элемента контейнера и «переместить» непрозрачность.
(Были некоторые версии браузера, которые поддерживали переходы на градиентах (например, IE10. Я тестировал градиентные переходы в 2016 году в IE, и они, казалось, работали в то время, но мой тестовый код больше не работает.)
Обновление: октябрь 2018 г. Переходы градиентов с новым синтаксисом без префикса [например, радиальный градиент (...)] теперь подтверждены для работы (снова?) В Microsoft Edge 17.17134. Я не знаю, когда это было добавлено. Все еще не работает над последними версиями Firefox и Chrome / Windows 10.
источник
Одним из обходных путей является изменение положения фона, чтобы получить эффект изменения градиента: http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/
источник
Решением является использование background-position для имитации градиентного перехода. Это решение использовалось в Twitter Bootstrap несколько месяцев назад.
Обновить
http://codersblock.blogspot.fr/2013/12/gradient-animation-trick.html?showComment=1390287622614
Вот быстрый пример:
Состояние ссылки
Состояние наведения
источник
background-size, которое вы не можете использовать в IE8. caniuse.com/#search=background-size Кроме того, это хорошее решение.Для чего это стоит, вот миксин Sass:
Использование:
@include gradientAnimation(red, blue, .6s);Mixin:
Взято из этого удивительного поста на Medium от Дейва Ланни: https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759
источник
Я знаю, что это старый вопрос, но, возможно, кому-то нравится мой способ решения в чистом CSS. Градиент исчезает слева направо.
источник
В следующем теге привязки есть ребенок и внук. Внук имеет дальний градиент фона. Дочерний на ближнем фоне прозрачен, но имеет градиент для перехода к. При наведении, непрозрачность ребенка изменяется от 0 до 1, в течение 1 секунды.
Вот CSS:
И это HTML-код:
Вышеуказанное проверено только в последней версии Chrome. Это изображения перед наведением, на полпути при наведении и полностью переходные изображения при наведении:
источник
Частичный обходной путь для градиентного перехода заключается в использовании тени блока вставки - вы можете изменить либо тень блока, либо цвет фона - например, если вы создаете тень блока вставки того же цвета, что и фон, а затем используете переход на цвет фона, это создает иллюзию этот простой фон меняется на радиальный градиент
источник
Вы можете Фальсифицировать переходы между градиентами, используя переходы в непрозрачности нескольких сложенных градиентов, как описано в нескольких ответах здесь:
CSS3 анимация с градиентами .
Вместо этого вы также можете изменить позицию, как описано здесь:
CSS3 градиентный переход с background-position .
Еще несколько приемов здесь:
Анимация CSS3 градиентов .
источник
Нашел хороший взлом на codepen, который изменяет
opacityсвойство, но достигает того, что исчезает из одного градиента в другой, используя псевдоэлементы. То, что он делает, он устанавливает:afterтак, чтобы при изменении непрозрачности фактического элемента,:afterэлемент отображался таким образом, чтобы он выглядел так, как будто это было затухание. Думал, что было бы полезно поделиться.Исходный код: http://codepen.io/sashtown/pen/DfdHh
источник
Основываясь на коде css в вашем вопросе, я пробовал код следующим образом, и он работает для меня (запустите фрагмент кода), и, пожалуйста, попробуйте сами:
Основываясь на коде css в вашем вопросе, я попробовал следующий код, и он работает для меня, и, пожалуйста, попробуйте сами:
Это работает для вас? Измените цвет в зависимости от ваших потребностей :)
источник
Попробуйте использовать: до и: после (т.е. 9+)
источник
Как указано. Градиенты в настоящее время не поддерживаются переходами CSS. Но в некоторых случаях вы можете обойти это, установив один из цветов на прозрачный, чтобы фоновый цвет какого-либо другого элемента обертки просвечивал, и вместо этого измените его.
источник
Я использую это на работе :) IE6 + https://gist.github.com/GrzegorzPerko/7183390
Не забывайте,
<element class="ahover"><span>Text</span></a>если вы используете текстовый элемент.источник
Не повредит опубликовать другое мнение, так как до сих пор нет официального способа сделать это. Написал легкий плагин jQuery, с помощью которого вы можете определить радиальный градиент фона и скорость перехода. Это базовое использование затем позволит ему исчезнуть, оптимизированный с помощью requestAnimationFrame (очень плавный):
http://codepen.io/Shikkediel/pen/xbRaZz?editors=001
Сохраняет оригинальный фон и все свойства без изменений. Также есть отслеживание выделения в качестве параметра:
http://codepen.io/Shikkediel/pen/VYRZZY?editors=001
источник
Я хотел, чтобы div отображался как трехмерная сфера и переходил через цвета. Я обнаружил, что цвета градиента фона не переходят (пока). Я поместил радиальный градиентный фон перед элементом (используя z-index) с переходным сплошным фоном.
тогда
div.ballвнизу:потом поменял цвет фона
div.ballи вуаля!https://codepen.io/keldon/pen/dzPxZP
источник