efect Css de a transforma animație folosind WebKit
Mecanismul webkit încorporează mai multe de transformare și animație efecte complexe, care se poate actualiza, într-adevăr afișări ale utilizatorilor Safari. Această lecție oferă o scurtă trecere în revistă a proprietății cum rotateY poate reproduce efectul de a transforma, și modul în care acesta poate fi folosit pentru a crea un design rece pentru tema „Principalele avantaje ale Transformers.“
Pentru efectul de redare completă necesită browser-ul Safari.
Exemplul arată modul în care efectul de cotitură poate fi folosit pentru a furniza informații în formă de flipping carte de joc. Treceți cu mouse-ul peste imaginea de Optimus Prime si Megatron, pentru a vedea caracteristicile lor. Acum ne uităm la modul în care a fost făcut.
HTML este foarte simplu. O pereche de elemente
carte de fundal este setată ca prima repetare a texturii de gri, iar apoi fiecare element HTML-l stilizat. h2 se înlocuiește cu imaginea textului (poate fi pentru a adăuga efecte Photoshop). dimensiunea fontului și culoarea este setată în elementele paragrafelor, sunt, de asemenea, plasate logo-urile Autobot și Despetikonov.
Pentru a afișa caracteristicile și logo-ul alăturate, dt și dd sunt deplasate spre stânga și spre dreapta, respectiv. dl devine un gradient în fundal și stilul de text care merge la dt și dd.
animație WebKit
Pentru a face să funcționeze în acțiune este o grămadă de webkit animație și proprietăți de transformare. Să începem revizuirea de mai sus. container Div devine caracteristică -webkit-perspectivă de 1000, pentru a adăuga realism la mișcarea de întoarcere, în caz contrar totul pare plat. Apoi, -webkit-transforma-stil: păstrarea-3d; și -webkit tranziție: 0,5s; adăugat la cărțile div. Transformarea Stil prezerva-3d asigură că elementele descendenții vor folosi mișcarea tridimensională, mai degrabă decât plat. Valoarea tranziției stabilește efectul total de viteză 0,5s pe ansamblu.
Când cursorul mouse-ului este plasat deasupra hărții, a adăugat o rotateY transformare webkit (180deg). care se rotește obiectul cu 180 de grade de-a lungul axei Y. -webkit-verso-vizibilitate: ascunse; totuși este o WebKit proprietate mare, care este folosit pentru partea din față a cardului. Astfel, partea din spate a cardului este ascunsă, fără ca acest obiect ar rostogoli pur și simplu peste într-o imagine în oglindă în sine, iar partea din spate ar rămâne invizibil.
HTML complet
CSS complet
Prin obținerea de informații de la două canale (vedere si auz) eficacitatea instruirii de învățare departe superioare de cărți. O temele pentru acasă și teste on-line vă va permite să se gândească în mod constant în limba țintă și imediat verifica cunoștințele!
Dacă doriți o lungă perioadă de timp pentru a studia modul în HTML, mi-ai, pentru ai vesti bune!
Dacă ați învățat deja HTML și doresc să avanseze, următorul pas va fi de a studia tehnologia CSS.
Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!