Utilisez des transitions CSS3 avec des arrière-plans dégradés-Questions et réponses sur le réseau chinois PHP

J'essaie d'utiliser CSS pour effectuer une transition sur une vignette au survol de la souris afin que l'arrière-plan s'efface au survol. La conversion ne fonctionne pas, mais si je la change simplement en rgba()value, cela fonctionne bien. Ne prend-il pas en charge les dégradés ? J'ai également essayé d'utiliser une image et cela ne convertit pas non plus l'image.

 Je sais que c'est possible parce que quelqu'un l'a fait dans un autre post, mais je ne sais pas exactement comment. Toute aide> Voici quelques CSS qui peuvent être utilisés :

#container div a { -webkit-transition : arrière-plan linéaire 0,2 s ; -moz-transition : arrière-plan linéaire 0,2 s ; -o-transition : arrière-plan linéaire 0,2 s ; transition : arrière-plan linéaire 0,2 s ; position : absolue ; largeur : 200 px ; hauteur : 150px ; bordure : 1px #000 solide ; marge : 30px ; indice z : 2 } #conteneur div a:hover { arrière-plan : -webkit-gradient(radial, 100 75, 100, 100 75, 0, from(rgba(0, 0, 0, .7)), to(rgba(0, 0, 0, .4))) } ≪/pré>

#DemoGradient{ background: -webkit-linear-gradient(#C7D3DC,#5B798E); background: -moz-linear-gradient(#C7D3DC,#5B798E); background: -o-linear-gradient(#C7D3DC,#5B798E); background: linear-gradient(#C7D3DC,#5B798E); -webkit-transition: background 1s ease-out; -moz-transition: background 1s ease-out; -o-transition: background 1s ease-out; transition: background 1s ease-out; background-size:1px 200px; border-radius: 10px; border: 1px solid #839DB0; cursor:pointer; width: 150px; height: 100px; } #DemoGradient:Hover{ background-position:100px; }

répondre à tous (2)

P粉2266425682023-08-24 11:27:23 2 plancher

Une solution consiste à transformer la position de l'arrière-plan pour créer un effet de changement de dégradé :http://sapphion.com/2011/10/css3-Gradient transition et position d'arrière-plan/

Comme+0

Ajouter une réponse

P粉7879344762023-08-24 09:43:10 1 plancher

Les dégradés ne prennent pas encore en charge les transitions (bien que la spécification actuelle indique qu'ils devraient prendre en charge les transitions de type dégradé à dégradé via interpolation.).

Si vous souhaitez un effet de fondu avec un dégradé d'arrière-plan, vous devez définir laopacitésur l'élément conteneur et "transitionner" l'opacité.

(Il existe déjà certaines versions de navigateur qui prennent en charge les transitions dégradées (par exemple IE10. J'ai testé les transitions dégradées dans IE en 2016 et elles semblaient fonctionner à l'époque, mais mon code de test ne fonctionne plus.)

Mise à jour : octobre 2018Il est désormais confirmé que les transitions dégradées avec une nouvelle syntaxe sans préfixe [par exemple Radial-gradient(...)] fonctionnent (à nouveau ?) sur Microsoft Edge 17.17134. Je ne sais pas quand cela a été ajouté. Ne fonctionne toujours pas sur les derniers Firefox et Chrome/Windows 10.

Mise à jour : décembre 2021La solution de contournement @property fonctionne désormais dans les navigateurs récents basés sur Chromium (mais ne fonctionne pas dans Firefox). Voir (et voter)la réponse de @mahozadci-dessous (ou YMMV ci-dessus).