Crearea animațiilor lovitură de stat în css
Notă rapidă: acest lucru nu este primul manual de un efect similar, dar toți ceilalți mi se părea prea complicat. În multe alte articole adăugate mai multe stiluri de la exemplele de cod, apoi cere cititorului să descifreze care dintre ele este nevoie și ceea ce nu este. În acest tutorial, această problemă cade, oferindu-vă numai stilurile necesare; Puteți decora fiecare parte a rândul său, după cum doriți.
HTML5 și CSS3 practica de la zero la rezultatul!
Structura HTML pentru efectul pe care bilateral așteptat:
Vreau să pariez că este versiunea de furnizor convenționale ciondăneală a codului prefix vei fi surprins de cât de puțin CSS este utilizat:
Aici este o imagine de ansamblu a procesului:
Recipientul exterior fixează termenul pe întreg domeniul animației
De fapt, containerul interior este inversat prin rotirea cu 180 de grade în timpul mouse-ului deasupra containerului părinte. Aici puteți controla, de asemenea, viteza de tranziție. Inversarea -180 grade inversează elementele în direcția opusă.
Membrii din fata si din spate sunt dispuse complet, astfel încât poate „suprapunere“ reciproc într-o singură poziție; lor fata de jos vizibilitate ascunsă, astfel încât dezavantajul de a transforma elemente în timpul animației nu este afișată
La elementul personal Z-index este mai mare decât randamentul, astfel încât să puteți codifica elementul frontal al primului, și el încă mai apare în partea de sus
membru inversă se rotește la 180 de grade pentru a acționa ca o a doua parte.
Aici, în general, și toate! Pune această structură simplă la locația dorită și alocați stiluri de fiecare parte pe gustul tau!
Comutator CSS lovitură de stat
lovitură de stat CSS verticală
Efectuați o lovitură de stat verticală pic mai greu - trebuie să schimbați axa sa. Codul sursă ar trebui să fie modificat, iar cardul va fi rotit în direcția opusă:
Vă confruntați cu orice stranietatea - nevoia de determinare a transforma exact bazat pe pixel în loc de 50%.
Lovitura de stat a fost întotdeauna un exemplu tipic clasic de ceea ce se poate face cu animații CSS, și într-o măsură mai mică - CSS 3D-animație. Cel mai bun lucru este că, de fapt implicat foarte puțin CSS. Acest efect este foarte bine potrivit pentru jocuri HTML5 și este ideal ca un singur efect de „carte“. De ce altceva ai fi oferit să-l folosească?
Revizie: Echipa webformyself.
HTML5 și CSS3 practica de la zero la rezultatul!
Cele mai multe știri IT si dezvoltare web pe canalul nostru-Telegram