Subiect: CSS lin varierea fundal.Fundalul
Asigurați-vă un fundal schimbare buna pentru un fundal în CSS este destul de simplu.
Să începem cu cel mai simplu exemplu - adăugați o tranziție lină a referințelor de fond.
implementare clasică:
Când treceți cu cursorul mouse-ului peste link-ul se va schimba culoarea de fundal de culoare albastru deschis, albastru închis, iar culoarea fontului - de la negru la alb. Situația obișnuită.
Acum, adăugați o tranziție lină a fundalului cu tranziții CSS:
Acum fundal nostru își schimbă treptat culoarea pentru o jumătate de secundă! Ca și în cazul altor proprietăți ale CSS, putem combina toate proprietățile de tranziție-o:
- Xakker
- Dezvoltator Ext.
- inactiv
- detalii
Re: CSS variind lin fundal.Fundalul
Acum, adăugați o schimbare buna culoarea fontului:
Cei cod atunci când mouse-ul se va schimba lin culoarea de fundal pentru fontul și culoarea o jumătate de secundă timp de 0,3 secunde. În cazul în care, cu toate acestea, avem nevoie de aceleași proprietăți pentru toate elementele, putem înlocui
-webkit-tranziție: fundal 0.5s ușurință;
-webkit-tranziție: culoare 0.3s ușurință;
pe
-webkit-tranziție: toate 0.5s usurinta;
Acum tranziție efect va fi aplicat la toate eveniment la schimbarea proprietăților și aceiași parametri - 0,5 secunde, ușurința cu efect.
Deci, putem adăuga o întârziere la efectul:
Acum animația noastră va rula o jumătate de secundă după îndreptat mouse-ul.
Se aplică trecerea la proprietatea poate fi orice - fundal, culoare, lungime, dimensiunea fontului, etc. Practic este proprietățile care definesc culoarea sau proprietăți, care pot fi exprimate în unități de lungime (px, em, ex) sau ca procent. Ca un eveniment, putem, de asemenea, se poate utiliza pseudo: focalizarea și: activ. De fapt - puteți utiliza cu orice tranziție selectoare.