All Articles Web
Divertirsi con CSS3 Transizioni
Toby Pitman on Mon, July 25th | 0 comments
If you are curious about how to create visual nice and responsive roll over effects with transitions in CSS3 then stop here. Toby Pitman, shows you how to implement some very neat CSS3 tricks.

Sembra che i produttori di browser sono davvero spingendo CSS3 nuove caratteristiche attraverso ad un ritmo piuttosto veloce, nonostante CSS2.1 appena essere stato

Anche se è CSS3 anni di distanza dall'essere concluso i browser più moderni che sono stati di attuazione per un po '. In questo piccolo trucco Ill vi mostrerà un roll-over pulito poco effetto usando CSS3 transizioni.


Fase 1

Ho alcuni tag molto semplici qui. Solo una lista non ordinata con alcuni link in:


Ive mettere il tag link all'interno di alcuni tag span puramente per la compatibilità all'indietro. So che la sua non strettamente semantico, ma se si vuole che questo lavoro in IE6 (Scuote pugno!) Questo è il modo youll necessità di segnare in su come IE6 (Scuote pugno!) Non capire: hover su qualcosa di diverso collegamento tag. Per IE7 youll necessario assicurarsi di dichiarare un doctype per: hover a lavorare su non-link elementi. Patetico, lo so!

Ive applicato alcuni stile semplice per fare una barra orizzontale di navigazione.


Questo è il risultato:


Ive applicata display: inline; per i tag lista per evitare alcuni problemi di layout in IE6 (Scuote pugno!).


Fase 2

Ora Im andando ad applicare un'immagine di sfondo per i miei tag link:


Questo è il risultato:


So che questo sembra un po 'strano, ma abbiate pazienza. L'immagine è posizionata utilizzando la regola di fondo stenografia.

di fondo: ;


Fase 3

Ora posso lo stile del tag span.


Questo è il risultato.


Youll notare che l'immagine di sfondo del tag link 'è ora nascosta dal colore di sfondo del tag span che è seduto su di esso. Il tag span è anche più piccolo 20px in altezza rispetto al tag link. Questo è importante!


Fase 4

Ora Ill applicare la: hover regola al mio tag link. In questo modo il collegamento tag immagine di sfondo per spostare verso il basso 10px, essenzialmente rivelando quando il mouse sopra il link.


Questo è il risultato.


A questo punto si sta essenzialmente nella modalità di sicurezza. Il markup corrente dovrebbe funzionare in tutti i browser conosciuti. Qualsiasi codice io aggiungo da ora in poi sarà CSS3 e supporto variano da browser a browser.


Fase 5

Ora Ill aggiungere la mia CSS3 regola di transizione per i tag link.


Heres come funziona.

transizione:

tutti (si applicano a tutte le proprietà CSS di questo elemento)

0,3 s (il tempo per il passaggio)

lineare (la curva di tempi di transizione)


Ora qualsiasi modifica le proprietà del tag link (al passaggio del mouse) sarà di transizione senza problemi al suo nuovo valore. Vale a dire la posizione di fondo e il colore del testo.

Youll notare anche che ci sono un bel paio di prefissi venditore per le transizioni CSS. Ogni browser implementa attualmente questo effetto in modi diversi quindi abbiamo bisogno di indirizzare il maggior numero possibile.


-Moz-= Mozilla Firefox

-Webkit-= Safari, Chrome

-O-= Opera


Una volta che questo è finalizzato diventerà semplicemente transizione.


Fase 6

Infine Ill aggiungere un po 'curve veloci arrotondati.


Questo è il risultato:


Compatibilità

  • This should work well in Firefox, Safari and Chrome. 
  • Opera does support CSS3 Transitions but not yet on background-position. 
  • Hopefully we’ll see this in Internet Explorer in about the year 3038. But don’t bet on it!!


Conclusione

Questo concetto può essere applicato a carichi di roll-over. Nel download sotto youll trovare alcuni esempi tra cui questo effetto in cui quando si tira su un album che mostra il formato CD, vinile con un bel passaggio.


SCARICA SPECIALI CSS3 esempi.

Gioca su e divertirsi un po '



Comments (0)

You must be logged in to comment. Login Now

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: