transizione css con gradiente lineare

Sto cercando di aggiungere una transizione a un pulsante. Ho lo sfondo che è fatto con css linear-gradient ma non funziona.

Questo è il css per il mio pulsante.

a.button { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@green), color-stop(100%,#a5c956)); -webkit-transition: background 5s linear; } a.button:hover { -webkit-gradient(linear, left top, left bottom, color-stop(0%,@greenhover), color-stop(100%,#89af37)) } 

Se ti stai chiedendo di @green e @greenhover, sto usando .less per creare il mio css.

Qualcosa non va in questo? Qualche idea?

Purtroppo, per il momento non puoi davvero passare gradienti di transizione.

Quindi, l’unica soluzione praticabile è l’utilizzo di un elemento aggiuntivo con il gradiente necessario e la transizione è l’opacità:

 a.button { position: relative; z-index: 9; display: inline-block; padding: 0 10px; background: -webkit-gradient(linear, 0 0, 0 100%, from(green), to(#a5c956)); background: -webkit-linear-gradient(top, green, #a5c956); background: -moz-linear-gradient(top, green, #a5c956); background: -o-linear-gradient(top, green, #a5c956); background: linear-gradient(top, green, #a5c956); } .button-helper { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background: -webkit-gradient(linear, 0 0, 0 100%, from(lime), to(#89af37)); background: -webkit-linear-gradient(top, lime, #89af37); background: -moz-linear-gradient(top, lime, #89af37); background: -o-linear-gradient(top, lime, #89af37); background: linear-gradient(top, lime, #89af37); -webkit-transition: opacity 1s linear; -moz-transition: opacity 1s linear; -o-transition: opacity 1s linear; transition: opacity 1s linear; } a.button:hover .button-helper { opacity: 1; } 
 button 

è complicato … e ovviamente è difficile da trovare;)

ok .. ho una soluzione. ed è fondamentalmente fatto tramite sorprendente :before selettore

 #cool-hover{ width: 120px; height: 120px; display: block; cursor: pointer; border-radius: 10px; box-shadow: 0 0 15px rgba(0,0,0,0.3); margin: 0px auto 24px auto; transition: all 0.5s; position: relative; overflow: hidden; } #cool-hover:before{ border-radius: inherit; display: block; width: 200%; height: 200%; content: ''; position: absolute; top: 0; left: 0; background: linear-gradient(135deg, #21d4fd 25%, #b721ff 75%); transition: all 0.5s; transform: translate(-25%, -25%); z-index: 0; } #cool-hover:after{ border-radius: 9px; display: block; width: 108px; height: 108px; margin: 6px; background: url('http://sofit.miximages.com/css-transitions/w0BjFgr.png'); background-size: cover; content: ''; position: absolute; top: 0; left: 0; z-index: 1; } #cool-hover:hover:before{ transform: translate(-25%, -25%) rotate(-180deg); } #cool-hover:hover{ box-shadow: 0 0 35px rgba(0,0,0,0.3); } 
 

Puoi simulare transizioni con sfumature usando le ombre esterne! Ad esempio, da una delle mie pagine:

 c { color: #FFF; background: #000; border-style:solid; border-color:#CCC; border-width: 0 0 0 1px; box-shadow: 2px 2px 2px #555, inset 0 25px 20px -10px rgba(255, 255, 255, 0.3), inset 0 -15px 20px -10px rgba(0, 0, 0, 0.15); -moz-box-shadow: 2px 2px 2px #555, inset 0 25px 20px -10px rgba(255, 255, 255, 0.3), inset 0 -15px 20px -10px rgba(0, 0, 0, 0.15); -o-box-shadow: 2px 2px 2px #555, inset 0 25px 20px -10px rgba(255, 255, 255, 0.3), inset 0 -15px 20px -10px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 2px 2px 2px #555, inset 0 25px 20px -10px rgba(255, 255, 255, 0.3), inset 0 -15px 20px -10px rgba(0, 0, 0, 0.15); -moz-transition: background-color .5s ease; -o-transition: background-color .5s ease; -webkit-transition: background-color .5s ease-in-out; transition: background-color .5s ease; } 

Seguito da:

 c:hover { color:#FFF; background: #505; position:relative; top:1px; box-shadow: -1px -1px -1px #555,inset 0 20px 20px -10px rgba(0, 0, 0, 0.15), inset 0 -15px 20px -10px rgba(255, 255, 255, 0.3); -moz-box-shadow: -1px -1px -1px #555,inset 0 20px 20px -10px rgba(0, 0, 0, 0.15), inset 0 -15px 20px -10px rgba(255, 255, 255, 0.3); -o-box-shadow: -1px -1px -1px #555, inset 0 20px 20px -10px rgba(0, 0, 0, 0.15), inset 0 -15px 20px -10px rgba(255, 255, 255, 0.3); -webkit-box-shadow: 1px -1px -1px #555, inset 0 20px 20px -10px rgba(0, 0, 0, 0.15), inset 0 -15px 20px -10px rgba(255, 255, 255, 0.3); } 

Qui, si sta essenzialmente utilizzando un’ombra inserita come maschera simile a Photoshop, causando un effetto sfumato sull’elemento sottostante. Al passaggio del mouse, si inverte l’effetto.

Se stai facendo il leggero risalto quando tieni premuto il pulsante, c’è una soluzione molto più semplice. Puoi solo spostare leggermente la sfumatura verso il basso e avere il colore di sfondo uguale al colore superiore della sfumatura: http://cdpn.io/oaByI

È piuttosto limitato, lo so, ma se funziona bene per quel caso d’uso.

So che questa domanda è piuttosto vecchia, ma ho trovato un buon modo per animare i gradienti di base che funzioneranno in alcuni casi.

Questo metodo ti consente di animare una variazione di colore del gradiente, ma non di cambiare la posizione degli arresti di colore.

https://jsfiddle.net/62vzydeh/

HTML:

 
Click Me!

CSS:

 .button { width: 200px; height: 30px; margin: 50px; padding-top: 10px; color: #C0C0C0; background: linear-gradient(to left, #F8F8F8, transparent 30%); background-color: #808080; text-align: center; font-family: sans-serif; cursor: pointer; transition: background-color 500ms; } .button:hover { background-color: #A0A0A0; } 

Conosco questo piuttosto vecchio ma non sono riuscito a trovare nessuna soluzione valida. Quindi qui ho fatto una buona soluzione per questo.

Innanzitutto fai il gradiente su “: prima e nascondilo con opacità, quindi passa l’opacità 1 al passaggio del mouse.

https://jsfiddle.net/sumon380/osqLpboc/3/

HTML:

 Button 

CSS:

 .button { text-decoration: none; padding: 10px 25px; font-size: 20px; color: #333; display: inline-block; background: #d6e9eb; position: relative; z-index: 1; transition: color 0.3s ease-out; } .button:before { background: #91a5f4; background: linear-gradient(135deg, #91a5f4 0%, #b08cf9 86%); content: ""; width: 100%; height: 100%; top: 0; left: 0; position: absolute; z-index: -1; opacity: 0; transition: opacity 0.3s ease-out; } .button:hover:before { opacity: 1; } .button:hover { color: #fff; } 

un modo hacky che ho provato è stato mettere un sacco di per replicare “position”, CSS hack qui: https://codepen.io/philipphilip/pen/OvXEaV

devi avere lo stesso stile in origine e cambiato stile in target.

piace

 a { background: transparent; background: linear-gradient(transparent,transparent); -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } a:hover { background: #abc07c; background: linear-gradient(#c5db95,#88a743); }