animație CSS3 atunci când treci exemple 9 - blog-indigo
Este uimitor cum lucrurile simple pot insufleti o pagină web obișnuită, pentru a face mai accesibilă experiența utilizatorului. Vorbim despre tranzițiile CSS3, puteți utiliza pentru a permite elementului de a transforma și de a schimba stilul, de exemplu, atunci când cursorul. Nouă exemple animatii CSS3 sunt disponibile mai jos, va contribui la crearea unei atmosfere de reacție pe site-ul, precum și a îmbunătăți aspectul general paginii datorită o tranziție lină de frumos.
Pentru informații mai detaliate puteți descărca fișierul arhivă.
1. Schimbarea culorii atunci când treceți
După realizarea acestui efect a fost de lucru destul de laborioase, cu calcule matematice valori specifice RGB. Acum este suficient pentru a scrie un stil CSS în care doriți să adăugați la selectorul: hover clasa pseudo, și setați culoarea de fundal, care, treptat (în 0,3 secunde) va înlocui culoarea de fundal original, atunci când treceți cursorul pe bloc:
2. Aspectul cadrului
transformare interesante și pline de culoare - cadru interior, apar treptat atunci când treceți mouse-ul. Ei bine, potrivit pentru decorarea diferitelor butoane. Pentru a obține acest efect, utilizați: hover clasa pseudo și proprietatea box-shadow cu parametrul insertie (seteaza umbra din interiorul celulei). În plus, necesitatea de a stabili umbre (în cazul nostru 23px) și culoarea sa întindere:
Această animație CSS - .. Excepție, adică pentru tranziția de proprietate nu este utilizat. În loc de aceasta am folosit:
- @keyframes - directiva de bază pentru a crea animație CSS-lapse care vă permite să facă așa-numitele .. storyboard și animație pentru a descrie o listă a punctelor cheie;
- animație și animație iterație numarare - proprietăți pentru a seta parametrii de animație (lungime și viteză) și numărul de cicluri (ori). În cazul nostru 1 a fost repetat.
4. atenuarea
netezi efect de amortizare - este, de fapt, schimbarea de obicei în transparența elementului. Animație este creat în două etape: în primul rând, trebuie să instalați starea inițială de transparență 1 - care este complet opacă, și apoi specificați valoarea atunci când treceți - 0.6:
Pentru rezultatul opus și modifica valorile în unele locuri:
5. Creșterea
Pentru a crește hover unitare, vom folosi proprietatea de transformare și să-l întreb sensul scală (1.2). În acest caz, unitatea va crește cu 20 la sută, păstrând în același timp proporțiile sale:
6. Scade
Zoom element la fel de ușor ca și creșterea. În cazul în care, în al cincilea paragraf pentru a mări a trebuit să specificați o valoare mai mare decât 1, pentru a reduce blocul vom specifica doar o valoare care este mai mică decât una, de exemplu, la scară (0,7). Acum, când unitatea mouse-ul va fi redus proporțional cu 30 la sută din dimensiunea originală:
7. Transformarea unui cerc
Una dintre animații utilizate în mod obișnuit - un element dreptunghiular, care, atunci când cursorul se transformă într-un cerc. Cu CSS proprietatea border-radius. utilizat în conjuncție cu: hover și tranziție. acesta poate fi pus în aplicare fără probleme:
8. rotaţie
animație întruchipare Funny - elementul de rotație printr-un anumit număr de grade. Pentru aceasta avem nevoie pentru a transforma din nou proprietatea. dar cu o valoare diferită - rotateZ (20deg). Cu acești parametri, blocul este rotit la 20 de grade în sens în jurul axei Z:
9. umbra 3D
Opiniile sunt divergente designeri este adecvată dacă efectul designului plat. Cu toate acestea, această animație CSS3 este foarte original și este, de asemenea, utilizat pe paginile web. va realiza un efect tridimensional folosind proprietăți deja familiare box-umbra (umbra creează multistratificat) și cu transformarea parametrul translateX (-7px) (furnizează blocul de deplasare pe orizontală la stânga de 7 pixeli):
Browser-ul Suport
Până în prezent, proprietatea de tranziție acceptă următoarele browsere: