Как зделать css градиент с плавной анимацией при навидении мыши?
Страницы: 1
Как зделать css градиент с плавной анимацией при навидении мыши?
Здраствуйте форумчане - хочу зделать кнопку на чистом css с градиентом и закруглеными углами и чтоб при навидении на нее мышки она менялась ПЛАВНО на другой градиент у меня толька реский переход получился - пеерепробовал все что знал например
Transition:gradient 0.5s; не работает -может есть другой способ?smile:mad:
Вот тема по этому поводу (english) http://stackoverflow.com/questions/6542212/use-css3-transitions-with-gradient-backgrounds
Речь идет о том, что вы и обнаружили - transition: gradient пока не реализовано.
01. Один из предлагаемых по этой ссылке вариантов - использовать анимаwb. фоновой картинки, которая сама по себе и есть гдадиентный переход.
02. Могу предложить еще такой вариант. Взять два контейнера (дива, к примеру). Можно использовать плавное изменение background-color нижнего контейнера, а эффект градиента эмулировать наложением прозрачного (rgba) градиента у верхнего - от прозрачного к белому, от прозрачного к черному и т.п.
Иначе говоря, что то типа такого:

Код
<html>
   <head>
      <title>Test</title>
      <style type="text/css">
         #color {
            width: 200px;
            height: 200px;
            margin: 50px auto 0 auto;
            background: black;

            -moz-transition: background-color 0.7s;
            -webkit-transition: background-color 0.7s;
            -o-transition: background-color 0.7s;
            transition: background-color 0.7s;
         }
         #color:hover {
            background: red;
         }
         #gradient {
            width: 200px;
            height: 200px;
            background: -moz-linear-gradient(rgba(255,255,255,0.9), transparent);
            background: -webkit-linear-gradient(rgba(255,255,255,0.9), transparent);
            background: -o-linear-gradient(rgba(255,255,255,0.9), transparent);
            background: -ms-linear-gradient(rgba(255,255,255,0.9), transparent);
            background: linear-gradient(rgba(255,255,255,0.9), transparent);
         }
      </style>   
   </head>
   <body>
      <div id="color">
         <div id="gradient"></div>
      </div>
   </body>
</html> 
Страницы: 1
Похожие темы:
Читают тему (гостей: 1, пользователей: 0, из них скрытых: 0)
Новые темыОбъявленияСвободное общение
11:07 01.02. Апдейт 31.01 // Chrome готовит "чёрную метку" для ИИ? 
06:34 Гугл пухнет от кеша, а нам - крошки. Разбор $114 млрд: Адсенс в минусе, Ютуб на подписках 
01:09 Yahoo Scout: Нейро-привет из склепа. Реальный шанс на траф или мимо? 
17:33 AntiBot Cloud - бесплатный скрипт и сервис защиты сайтов 
15:14 Апдейт Яндекса 7 февраля. Пока серп трясет, некоторые по ботам плачут 
15:10 Google Discover Core Update: Дискавер отделяют от поиска? 
11:30 ЕС душит ТикТок: прощай бесконечная лента и RPM? Что с монетизацией? 
10:22 Swapwatch.org — Мониторинг криптовалютных обменников 
10:19 SwapPix.io - быстрый и безопасный обменник криптовалют. 
15:12 CryptoGraph — Анонимный обмен криптовалют без KYC и AML 
12:38 Bankomat001 - Сервис обмена электронных валют 
10:42 Рассылки СМС/SMS, Вайбер/Viber, Ватсап/Whatsapp, Телеграм/Telegram любой тематики по всему миру 
09:36 Мониторинг обменников Сrypto-scout.io 
05:29 Продам обменник криптовалюты, а также новый обменник под ключ с обучением. Скидки на скрипты обменника 
11:10 Moltbook: Соцсеть для ботов, где людям закрыли рот. Началось? 
11:02 Гильотина для классиков: Клод доедает физические книги 
06:04 Кулеры и БП станут золотыми? Медь по 13 штук, олово в космосе 
05:09 Точные прогнозы на футбол 
23:45 Ставки на супер тренды в спорте 
22:31 [AI] Бот за $600к советовал есть сыр с крысами. Нью-Йорк его (наконец-то) снес 
13:38 Осталось 3-5 месяцев до блокировки YouTube в России, — заявил Клименко