Efecte originale atunci când se deplasează peste obiecte

Caracteristicile CSS3 sunt impresionante. În această lecție îi vom folosi pentru a implementa idei creative. Rezultatul este un set de efecte care însoțesc cursorul mouse-ului peste obiect - o descriere va fi afișată utilizând diferite stiluri pentru fiecare exemplu.







Notă: aceste efecte funcționează doar în browserele moderne care suportă CSS3.

Efecte originale atunci când se deplasează peste obiecte
Efecte originale atunci când se deplasează peste obiecte

Marcaj HTML

Structura marcajului este foarte simplă și intuitivă. Creați un container care să conțină imaginea și toate celelalte informații.

După crearea marcajului, setați stilurile. Pentru setul nostru de efecte, se va folosi o clasă cu reguli comune și vor fi adăugate proprietăți specifice pentru fiecare exemplar sub formă de clase separate. În textul lecției, prefixele de browser vor fi omise pentru o mai mare vizibilitate.

Acum, să ne imaginăm 10 efecte. Deschideți pagina demonstrativă într-o fereastră sau filă separată, vedeți și studiați codul.

Adăugăm o vizualizare de clasă specială - mai întâi elementul cu vizualizarea de clasă pentru acest efect. O clasă specială va fi adăugată în fiecare exemplar unui element cu vizualizarea de clasă (vizualizare în primul rând, vizualizare secundă, afișare a treia și așa mai departe).

În acest exemplu, tranzițiile de bază vor fi folosite pentru a crea un efect excelent.

Și acum să trecem la baza efectului nostru. Când cursorul mouse-ului trece imaginea, vom folosi o întârziere pentru a simula o animație simplă. Proprietatea de întârziere în tranziție. care este folosit în hover pseudo-clase. poate face modificări pentru diferența față de clasa obișnuită. În acest exemplu, nu folosim întârzieri în clasa obișnuită, dar în pseudo-clasele de hover, lansarea tranzițiilor este puțin întârziată. Când cursorul mouse-ului părăsește obiectul, se va utiliza valoarea implicită de 0s, iar "recuperarea" va avea loc rapid.

Aici, clasa masca are alte atribute pentru a construi efectul. Vom folosi proprietățile de transformare (traducere și rotire):

Pentru efectul nostru, transformarea traducerii va fi utilizată pentru a muta elementele în loc. Și masca se va roti. Elementele descrierii vor apărea cu o ușoară întârziere unul după altul.







În cel de-al treilea exemplu, vom folosi traducerea și rotirea transformărilor pentru a scoate elemente de descriere:

Instrucțiuni destul de simple pentru obținerea efectului.

În cel de-al patrulea exemplu, va fi utilizată o simplă scalare a imaginii și conținutului utilizând transformarea scalei. Pentru imagine, o întârziere de 0,2 secunde va fi setată în stiluri, dar cu cursorul plutind, întârzierea va fi 0s. Prin urmare, când treceți cursorul mouse-ului, efectul va apărea imediat și atunci când eliminați cursorul mouse-ului, va exista o întârziere.

Instrucțiuni simple pentru obținerea efectului. CSS3 poate face orice.

Când plasați mouse-ul, imaginea se aliniază spre dreapta și o descriere apare în partea stângă a acesteia, ca și cum ar fi schimbarea imaginii:

Transformarea inversă este de asemenea efectuată fără probleme:

În cel de-al șaptelea efect, ideea este de a folosi rotația imaginii în jurul centrului și de a reduce simultan scara sa. Iar descrierea este apoi abandonată de sus.

Când plasați mouse-ul, elementele de descriere apar cu întârziere:

În acest exemplu, se creează un efect de rebound atunci când elementele de descriere sunt scoase din partea de sus.

Adăugăm animația elementului mască și definim întârzierea pentru elementele de descriere:

Pentru a crea un efect de rebound, utilizați funcția translateY și mai multe cadre:

În acest exemplu, folosim două elemente de mască pentru a crea efectul închiderii perdelelor:

Două măști au parametri diferiți pentru transformări. Ele sunt, de asemenea, aliniate în moduri diferite.

Când poziționați cursorul, doar măriți și transparenți:

concluzie

Efecte originale atunci când se deplasează peste obiecte

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!

Efecte originale atunci când se deplasează peste obiecte

Efecte originale atunci când se deplasează peste obiecte

Dacă doriți să învățați HTML mult timp, atunci am o veste bună pentru dvs.!

Efecte originale atunci când se deplasează peste obiecte

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.

Efecte originale atunci când se deplasează peste obiecte

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!







Trimiteți-le prietenilor: