Tranziții între secțiunile de pagină utilizând css3

Tranziții între secțiunile de pagină utilizând css3
Tranziții între secțiunile de pagină utilizând css3

Marcaj HTML

Rubrica va conține o descriere și navigare:

Motivul pentru care o astfel de structură "neordonată" este plasată la final este că navigația devine disponibilă cu ajutorul unui selector vecin comun (







) și puteți seta culoarea proprie pentru fiecare element.

Ideea principală este să folosiți pseudo-clasa: țintă pentru a organiza trecerea la secțiunea curentă. În exemplul descris, se folosește culisarea panourilor de sus. În demonstrație sunt construite două efecte de tranziție diferite.

Mai întâi, setați stilurile pentru titlu și navigație. Trebuie să ne păstrăm poziția la un moment dat, deși orice altceva se va mișca.

Toate secțiunile cu excepția #home. au panoul de clasă. Aici, tranziția va fi utilizată atunci când elementul primește clasa "direcționată". Trucul este de a folosi o valoare negativă pentru câmpul din clasa "normală" și de a respinge câmpul în clasa pseudo-clasă: țintă. Prin adăugarea unei tranziții, facem ca panoul să alunece din partea de sus atunci când este selectat:







Definiți acum stilul clasei de conținut:

Pentru a schimba culoarea elementului de navigație curent, vom folosi pseudo-clasa țintă cu un selector vecin comun pentru a obține elementul corespunzător:

Tranziții între secțiunile de pagină utilizând css3

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!

Tranziții între secțiunile de pagină utilizând css3

Tranziții între secțiunile de pagină utilizând css3

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

Tranziții între secțiunile de pagină utilizând css3

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.

Tranziții între secțiunile de pagină utilizând css3

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: