C'è un modo per far sfumare il colore di sfondo di un pulsante dal grigio al blu e poi tornare al grigio usando solo css3? Un buon esempio è un pulsante di azione predefinito è il cacao? So che questo può essere fatto in javascript, ma preferisco usare solo CSS per questo.css3 button background color infinito transition
10
A
risposta
24
Hi Ho fatto il pulsante attraverso l'animazione CSS3 si prega di avere sguardo spero il suo vicino alla tua domanda: -
HTML
<input type="submit" value="submit" class="button" />
CSS
.button {
width:100px;
height:20px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s infinite; /* Firefox */
-webkit-animation:myfirst 5s infinite; /* Safari and Chrome */
}
@-moz-keyframes myfirst /* Firefox */ {
0% {background:red;}
50% {background:yellow;}
100% {background:red;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */ {
0% {background:red;}
50% {background:yellow;}
100% {background:red;}
}
vedere la demo: - http://jsbin.com/osohak/7/edit
Per saperne di più CSS3 Transitions & Animazione http://css3.bradshawenterprises.com/cfimg/
5
Se avete bisogno di dissolvenza animazione sulla hover
o cose del genere, CSS3 transition property è la vostra soluzione.
EDIT:
.btn {
background-color: lightblue;
-webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
-moz-transition: all 0.3s ease-out; /* FF4+ */
-ms-transition: all 0.3s ease-out; /* IE10 */
-o-transition: all 0.3s ease-out; /* Opera 10.5+ */
transition: all 0.3s ease-out;
}
.btn:hover {
background-color: lightgreen;
}
Problemi correlati
- 1. wpf button background hover color
- 2. background-transition con background-size: cover
- 3. Animazione CSS3 - ciclo infinito fluido
- 4. CSS3 background-clip
- 5. Change ActionBarSherlock background color
- 6. La proprietà Background RGBA non è supportata dalle transizioni CSS3?
- 7. Bootstrap IE background color issue
- 8. Android - Custom AlertDialog Background Color
- 9. twitter bootstrap - well background color
- 10. Android AlertDialog title background color
- 11. FullCalendar: Change agendaDay background-color
- 12. Animate UIView background color swift
- 13. Come funziona Polymer Hero Transition
- 14. Eclipse 4.2 Java Console Change Background Color
- 15. Come convertire "background-color" in formato rgb()?
- 16. material-calendarview set background color of dates
- 17. Come dividere il background-color in 4
- 18. stampa background-color in Firefox e IE
- 19. css3 webkit transition trasformare translate: valore di proprietà non valido?
- 20. CSS3 Transition: transizione diversa per * IN * e * OUT * (o di ritorno dallo stato di transizione)
- 21. Transizione CSS3 non funzionante
- 22. -webkit- vs -moz-transition
- 23. Transizione Css3 solo su scala
- 24. CSS3 + Javascript - Will -ms-transition: opacity 1s easy-in-out; lavoro solo in IE 10?
- 25. -webkit-transition con display
- 26. CSS3 ritardo di transizione di attributo specifico
- 27. "body {background-color}" funziona in HTML ma non in CSS
- 28. Binding stile knockout: firefox non imposta background-color?
- 29. Perché jQuery .css ('background-color') restituisce rgba (0,0,0,0) per 'transparent'?
- 30. Get background-color in formato # 000 e non RGB
Potete fornire il codice poper di questo problema e un collegamento demo –
Scopri il tuo codice di desiderio a edizione. –
Ciao @Tooraj hover Proprietà ma penso che la domanda sia quella modifica automatica al colore di .btn –