Próbuję przejść po najechaniu myszką za pomocą css na miniaturze, aby po najechaniu myszą gradient tła zanikał. Przejście nie działa, ale jeśli po prostu zmienię go na rgba()wartość, będzie działać dobrze. Czy gradienty nie są obsługiwane? Próbowałem też użyć obrazu, ale też go nie przeniesie.
Wiem, że to możliwe, ponieważ w innym poście ktoś to zrobił, ale nie wiem, jak dokładnie. Każda pomoc> Oto kilka CSS do pracy:
#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)))
}
Odpowiedzi:
Gradienty nie obsługują jeszcze przejść (chociaż obecna specyfikacja mówi, że powinny one obsługiwać przejścia podobne do gradientu do podobnych przejść gradientu przez interpolację).
Jeśli chcesz uzyskać efekt przenikania z gradientem tła, musisz ustawić krycie na elemencie kontenera i „przerzucić” krycie.
(Było kilka wydań przeglądarki, które obsługiwały przejścia na gradientach (np. IE10. Testowałem przejścia gradientów w 2016 roku w IE i wydawały się wtedy działać, ale mój kod testowy już nie działa.)
Aktualizacja: październik 2018 Przejścia gradientowe z nową bez prefiksu nową składnią [np. Gradient radialny (...) teraz potwierdzono (ponownie?) Na Microsoft Edge 17.17134. Nie wiem, kiedy to zostało dodane. Nadal nie działa na najnowszych przeglądarkach Firefox i Chrome / Windows 10.
źródło
Jednym z obejść jest przeniesienie pozycji tła, aby uzyskać efekt zmieniający się gradient: http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/
źródło
Rozwiązaniem jest użycie położenia tła do naśladowania przejścia gradientu. To rozwiązanie zostało zastosowane w Bootstrap na Twitterze kilka miesięcy temu.
Aktualizacja
http://codersblock.blogspot.fr/2013/12/gradient-animation-trick.html?showComment=1390287622614
Oto szybki przykład:
Stan łącza
Stan zawisu
źródło
background-size, której nie można uzyskać w IE8. caniuse.com/#search=background-size Poza tym jest to miłe rozwiązanie.Oto, co warto, oto mixin Sassa:
Stosowanie:
@include gradientAnimation(red, blue, .6s);Mixin:
Zaczerpnięte z tego niesamowitego posta na Medium od Dave'a Lunny'ego: https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759
źródło
Wiem, że to stare pytanie, ale niech ktoś się spodoba mojemu rozwiązaniu w czystym CSS. Gradient zanika od lewej do prawej.
źródło
Poniżej tag zakotwiczenia ma dziecko i wnuka. Wnuk ma szeroki gradient tła. Dziecko na bliskim tle jest przezroczyste, ale ma gradient do przejścia. Po najechaniu kursorem krycie dziecka zmienia się z 0 na 1 na 1 sekundę.
Oto CSS:
A to jest HTML:
Powyższe jest testowane tylko w najnowszej wersji Chrome. Są to obrazy przed najechaniem kursorem, w połowie najechania kursorem iw pełni przeniesione po najechaniu kursorem:
źródło
Częściowym obejściem przejścia gradientowego jest użycie cienia wstawki - możesz przejść sam cień cienia lub kolor tła - np. Jeśli utworzysz cień cienia w tym samym kolorze co tło, a następnie użyjesz przejścia na kolor tła, tworzy iluzję zwykłe tło zmienia się w gradient radialny
źródło
Możesz sfałszować przejścia między gradientami, używając przejść w kryciu kilku skumulowanych gradientów, jak opisano w kilku odpowiedziach tutaj:
Animacja CSS3 z gradientami .
Możesz także zmienić pozycję, jak opisano tutaj:
Przejście gradientowe CSS3 z pozycją tła .
Więcej technik tutaj:
Animowanie gradientów CSS3 .
źródło
Znalazłem niezły hack na codepen, który modyfikuje
opacitywłaściwość, ale osiąga to zanikanie z jednego gradientu do drugiego poprzez wykorzystanie pseudoelementów. To, co robi, ustawia:aftertak, aby po zmianie krycia rzeczywistego elementu:afterelement pojawił się, aby wyglądał jak zanikanie. Pomyślałem, że warto się podzielić.Oryginalny codepen: http://codepen.io/sashtown/pen/DfdHh
źródło
W oparciu o kod css w twoim pytaniu wypróbowałem kod w następujący sposób i działa on dla mnie (uruchom fragment kodu) i spróbuj sam:
W oparciu o kod css w twoim pytaniu, wypróbowałem kod w następujący sposób i działa dla mnie, i spróbuj sam:
Czy to działa dla ciebie? Zmień kolor w zależności od potrzeb :)
źródło
Spróbuj użyć: przed i: po (ie9 +)
źródło
Jak wspomniano. Gradienty nie są obecnie obsługiwane w CSS Transitions. Ale w niektórych przypadkach można obejść ten problem, ustawiając jeden z kolorów na przezroczysty, aby kolor tła innego elementu owijającego świecił, i zamiast tego przechodził.
źródło
Używam tego w pracy :) IE6 + https://gist.github.com/GrzegorzPerko/7183390
Nie zapomnij o tym,
<element class="ahover"><span>Text</span></a>czy używasz elementu tekstowego.źródło
Nie może zaszkodzić opublikowanie innego widoku, ponieważ nadal nie ma oficjalnego sposobu na zrobienie tego. Napisałem lekką wtyczkę jQuery, za pomocą której możesz zdefiniować gradient promieniowy tła i prędkość przejścia. To podstawowe użycie pozwoli następnie na zanikanie, zoptymalizowane za pomocą requestAnimationFrame (bardzo płynnie):
http://codepen.io/Shikkediel/pen/xbRaZz?editors=001
Zachowuje oryginalne tło i wszystkie właściwości nienaruszone. Ma również ustawienie podświetlania jako ustawienie:
http://codepen.io/Shikkediel/pen/VYRZZY?editors=001
źródło
Chciałem, aby div wyglądał jak sfera 3D i przechodził przez kolory. Odkryłem, że gradientowe kolory tła nie zmieniają się (jeszcze). Umieściłem radialne tło gradientowe przed elementem (używając indeksu Z) z przejściowym jednolitym tłem.
następnie
div.ballpod spodem:następnie zmieniłem kolor tła
div.balli voila!https://codepen.io/keldon/pen/dzPxZP
źródło