Rezultatul acestei lecții funcționează în Safari, Chrome, Opera, Firefox, începând cu versiunea 4 (unde veți vedea transformarea, dar fără animație). De asemenea, utilizând prefixul browserului -ms-, puteți vedea rezultate pozitive în IE, începând cu versiunea 9.
Pentru a implementa animația CSS, trebuie să setați setări speciale de transformare care să răspundă evenimentelor mouse-ului. De asemenea, trebuie să specificați o funcție specială care va fi responsabilă de durata animației.
Pentru munca transformărilor în Firefox și Opera, pur și simplu înlocuiți prefixul -webkit cu -moz și -o. Pentru IE - on - uri.
1. Introducere în transformarea CSS
Transformările CSS sunt folosite pentru a schimba aspectul, rotația și alte transformări ale unui element. Toate aceste setări sunt setate în foile de stil obișnuite, iar când deschideți pagina, veți vedea deja rezultatul final al transformării. Pentru a vedea transformarea propriu-zisă de la un tip la altul (animație de transformare), un eveniment poate fi legat de un element (de exemplu, un eveniment mouseover);
În exemplul de mai jos, am aranjat 4 div divizii absolut identice cu un cadru în 2px. Pentru a transforma aceste elemente în browserele care lucrează pe webkit, adăugăm prefixul -webkit-transform:
Mutat la dreapta -webkit-transform: traduce (3em, 0);
Prin obținerea de informații imediat prin două canale (vedere și auz), eficiența predării este mult mai mare decât învățarea din cărți. Și temele și testele online vă vor permite să gândiți în mod constant în limba pe care o învățați și să vă verificați imediat cunoștințele!
Dacă doriți să învățați HTML mult timp, atunci am o veste bună pentru dvs.!
Dacă ați învățat deja HTML și doriți să treceți mai departe, următorul pas este să învățați 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!
Articole similare
Trimiteți-le prietenilor: