Share
Pe măsură ce CSS3 rulează în jurul web-ului, aduce împreună cu el și câteva noi tehnici de prezentare interesante. Astăzi, vom analiza elementele de bază ale utilizării tranzițiilor și animațiilor CSS3 pentru a adăuga un strat suplimentar de poloneză.
Acest tutorial include un screencast disponibil pentru membrii Tuts + Premium.
Pentru a începe, vom lucra cu câteva tehnici de bază - în primul rând, o simplă schimbare a culorii textului atunci când un utilizator se deplasează peste un element specificat.
a culoare: # 000; a: hover culoare: # f00;
Aici, schimbăm culoarea textului pe roșu pe hover. Acum, cu un mic CSS3, putem crea un aspect mult mai neted prin trecerea treptată a culorii.
a culoare: # 000; -webkit-transition: culoare 1s easy-in; a: hover culoare: # f00;
Am adăugat proprietatea css, -webkit-transition. Rețineți că prefixul -webkit specifică faptul că acest lucru va funcționa numai în motoarele Webkit sau în Safari și Chrome. Din fericire, alte browsere moderne au și implementările proprii. O declarație completă care acoperă toate browserele poate arăta similară cu următoarea:
a culoare: # 000; -webkit-transition: culoare 1s easy-in; -moz-tranziție: ușurința de culoare 1s; -o-tranziție: ușurința de culoare 1s; tranziție: ușurința culorii 1s;
Rețineți că pentru acest tutorial ne vom axa exclusiv pe implementarea webkit. După declararea proprietății, avem valorile "ușurința de culoare 1". Aceasta este declarația stenogramei; cele trei valori reprezintă:
În acest caz, trecem la tranziție cu ușurință, care va începe tranziția încet și va accelera tranziția.
O altă utilizare de bază a stărilor în schimbare este schimbarea fundalului unei casete de intrare pe focalizare.
input.ourInputBox: focus -webkit-tranziție: fundal-culoare 0.5s liniar; fundal: #CCC;
De data aceasta, am pus declarația de tranziție în starea de hover, astfel încât să nu adăugăm clase suplimentare inutile CSS. Aplicăm tranziția odată ce cutia de intrare se concentrează.
Cesiunile CSS sunt de fapt relativ directe pentru a adăuga la funcționalitatea hover existentă și pentru a oferi site-ului dvs. poloneză suplimentară pentru browserele care acceptă CSS3.
Pentru a face lucrurile un pas mai departe, putem de asemenea să trecem la mai multe proprietăți CSS folosind versiunile lungi ale tranziției CSS3.
a.thebg culoare: # 000; fundal: # F00; padding: 5px; -webkit-border-radius: 5px; -webkit-transition-property: culoare, fundal; -webkit-durată de tranziție: 1s, 1s; -webkit-transition-timing-function: linear, easy-in; a.thebg: hover culoare: # f00; fundal: # 000;
De data aceasta, fundalul și culoarea textului se schimbă pe hover, astfel încât să putem viza ambele proprietăți cu tranziția noastră. Am împărțit pur și simplu tranziția: mai întâi avem -webkit-transition-property și separăm diferite valori cu o virgulă. Așadar vizează proprietățile de culoare și de fond, respectiv.
-webkit-transition-property: culoare, fundal;
Apoi am stabilit durata tranziției utilizând:
-durata webkit-transition: 1s, 1s;
Acestea sunt menționate în aceeași ordine ca prima declarație; de data aceasta, însă, ambele valori sunt setate la 1 s.
În sfârșit, am setat funcția de sincronizare și am setat două valori diferite: primul, linear, se referă la prima noastră variabilă declarată - culoare; iar al doilea se referă la fundalul variabil.
Deci, am setat culoarea la o schimbare liniară pe o secundă, iar fundalul pentru ușurință în aceeași perioadă de timp.
Cesiunile CSS3 încep să intre în propria lor când sunt combinate cu alte proprietăți CSS noi.
Puteți examina exemple de utilizare a elementelor suprapuse și a tranzițiilor pe Andy Clarke's Pentru un web frumos.
Să creăm un exemplu simplu de animare a unui semn pop out.
Mai întâi creăm caseta de legare pentru semnătură și îi oferim un context de poziționare relativ pentru a ne asigura că putem poziționa elementele absolut în interiorul acestuia.
#signpost width: 60px; height: 196px; Poziția: relativă;
Acum, așezați cutia pe pagină și puneți piesele semnei în interiorul ei.
În continuare, postul este poziționat cu un z-index de două, pentru al plasa pe partea de sus a semnului.
#post width: 79px; height: 196px; z-index: 2; Poziția: relativă;
Acum, adăugăm semnul, poziționat sub post și rotindu-l cu proprietatea de transformare CSS3.
#sign height: 46px; lățime: 80px; Poziția: absolută; top 10; stânga: 60; -webkit-transform-origin: 0 0; -webkit-transform: rotiți (86deg); z-index: 1; -webkit-transition: -webkit-transform 0.5s ușurință-out-out;
Semnul este rotit folosind -webkit-transform: rotate (86deg) și este poziționat sub post. Pentru a ne asigura că semnul se rotește în jurul punctului potrivit, trebuie să schimbăm transforma originea în colțul din stânga sus: 0, 0.
Am setat tranziția pentru a schimba proprietatea -webkit-transform peste 0.5 secunde cu un profil de ușurință în ieșire, iar pe hover, vom roti semnul înapoi la orientarea inițială.
#signpost: hover #sign -webkit-transform: rotire (0deg);
Facem acest lucru pe #signpost conținând: hover mai degrabă decât pe hover #sign în sine.
Acum putem lega toate acestea împreună, folosind animații webkit, care ne dau puterea de a efectua lucruri precum rotația continuă.
Începem prin crearea a două imagini în cerc și poziționarea lor în interiorul unei divii care conține - așa cum am făcut-o și cu indicatorul de mai sus.
#circles width: 180px; height: 180px; Poziția: relativă; .ciclușir lățime: 180px; height: 180px; Poziția: absolută; z-index: 1; top: 0: stânga: 0; .middlecircle width: 90px; înălțime: 90px; Poziția: absolută; z-index: 3; top: 45px; stânga: 45px;
Acum trebuie să definim animațiile; vom întoarce cercurile în direcții opuse, așa că trebuie să setăm două animații.
@ -webkit-keyframes spin de la -webkit-transform: rotate (0deg); la -webkit-transform: rotate (360deg); @ -webkit-cheie-cheie spinrev din -webkit-transform: rotate (0deg); la -webkit-transform: rotate (-360deg);
Animația are un nume de referință, în acest caz "spin" și "spinrev". Apoi le atribuim a la și din valoare; astfel încât să rotim imaginea de la 0 deg la 360 deg folosind transformarea webkit și la -360 pentru invers.
Acum atribuim această animație starilor de hover. Rețineți că, dacă l-am alocat în starea normală, animația va funcționa imediat când pagina este încărcată.
#circles: hover .outercircle -webkit-animație-nume: rotire; -webkit-animație-iterație-count: infinit; -webkit-animație-funcția de sincronizare: liniară; -webkit-animație-durată: 10s; #circuri: hover .middlecircle -webkit-animație-nume: spinrev; -webkit-animație-iterație-count: infinit; -webkit-animație-funcția de sincronizare: liniară; -webkit-animație-durată: 5s;
Referindu-ne numele de animație pe care l-am creat mai devreme (-webkit-animation-name: spin;). Apoi, declarăm de câte ori ne dorim ca animația să ruleze (-webkit-animație-iterație-count: infinit;). În acest caz, infinitul îl va păstra rotunjit și rotund, în timp ce #circles div va fi suspendat.
Apoi setăm funcția de sincronizare (-webkit-animation-timing-function: linear;) și, în final, stabilim o durată pentru fiecare iterație - în acest caz, va fi zece secunde (-webkit-animation-duration: ;) și cinci pentru o revoluție completă.
Odată ce avem totul de lucru, ar trebui să luăm în considerare utilizatorii care navighează fără browsere web capabile de CSS3. Acest lucru este ușor de realizat utilizând o bibliotecă JavaScript, cum ar fi Modernizr, care adaugă clase la elementul HTML care se referă la capabilitățile browserului.
Utilizând exemplul post semn de mai sus, browserele care nu acceptă transformările CSS nu vor plasa semnul sub postul corect; astfel încât să putem viza aceste browsere și pur și simplu ascundeți semnul până când acesta este plutind.
.nu-csstransforms #signpost #sign afișare: niciunul; .no-csstransforms #signpost: hover #sign afișare: bloc;
Este la fel de simplu ca și conectarea la scriptul Modernizr, găsirea unui nume corespunzător al clasei și apoi crearea unei instrucțiuni CSS separate pentru acea instanță.
Asta este tot pentru acum. Sper ca ti-a placut! Anunță-mă dacă aveți întrebări / comentarii mai jos!
Accentsconagua