Orei bune din timpul zilei. 🙂
Vreau să vă arăt cum vă puteți organiza animația utilizând CSS. Acum, mulți oameni au început să folosească această animație, deoarece nu necesită conexiunea script-urilor terță parte și a bibliotecilor jQuery. Am un text pe site, pe pagina principală, în antet, folosind și CSS, în partea stângă.
Există atât de multe efecte diferite și voi arăta câteva dintre ele. Puteți aplica aceste efecte oriunde pe site-ul dvs., restricția este doar în imaginația dvs. Primul exemplu pe care îl voi da ca pe site-ul meu, iar restul va fi deja pe același principiu, numai stiluri diferite.
Pentru a organiza animația, de exemplu div-block, mai întâi trebuie să scrieți codul HTML în locul site-ului în care doriți să faceți animația.
După cum puteți vedea, am atribuit id-ul și clasa blocului. Și id-ul poate pune ceea ce vrei și clasă - acesta este efectul. Apoi scrieți doar stilurile și obțineți rezultatul final.
În primul rând, doar stilurile locației blocului, vreau să spun id. Desigur, le poți schimba complet pentru nevoile tale.
Urmează stilurile de animație class-slideRight.
CSS Mișcarea dreapta
2s este momentul animației. Cred că este clar că nu este nimic complicat. Creat un bloc atribuit stiluri și stiluri de animație atribuite - gata. Așa cum sa spus, animația este la dreapta, adică blocul se mișcă de la stânga la dreapta.
Există câteva efecte pe care le puteți aplica animației. Mai jos voi scrie numele animațiilor și stilurilor. Pentru a vă face să funcționeze pentru dvs., trebuie să faceți totul ca și în cazul primului efect, ci să alocați clasei în funcție de numele efectului. Și așa, în ordine:
CSS Mutare la stânga
Efectul este similar cu primul, doar acum mișcarea din dreapta - spre stânga.
CSS Movement Down
Același efect cu mișcarea în jos.
CSS Move Up
Mișcarea este de jos în sus
CSS Mișcarea și extinderea
Elementul va urca de jos în sus, astfel încât va fi ca și cum ar fi comprimat pe laturi, după ce va crește, se va extinde brusc și va găsi un aspect normal.
CSS Mișcarea și extinderea
Același efect ca și cel precedent, numai mișcarea de sus în jos.
Creșterea aspectului animației CSS
Elementul apare din centru și crește la dimensiunea normală
Reducerea aspectului animației CSS
Elementul apare din centru și crește la dimensiunea normală
Animație CSS slăbirea
Elementul apare din centru, crește, în timp ce se învârte ca un leagăn.
CSS animație swing
Elementul doar leagă ca un leagăn până când se oprește
CSS drop animație salt
Elementul se ridică și cade brusc în jos
CSS fără rupere intermitentă
Elementul este în mod constant pulsatoriu fără oprire.
Mișcare CSS cu susul în jos
Elementul se mișcă în sus și în jos fără oprire.
CSS leagăn fără oprire
Elementul se va balansa ca un leagan fără oprire
Creșterea animației CSS
Elementul crește treptat până la dimensiunea completă de jos în sus
Creștere CSS de sus în jos
Același efect ca cel precedent, numai creșterea de sus în jos
Creșterea CSS de la dreapta la stânga
Elementul crește de la dreapta la stânga
Creșterea CSS de la stânga la dreapta
Același efect ca și cel precedent, exact opusul, de la stânga la dreapta.
Iată câteva efecte interesante pe care le puteți folosi pe site-ul dvs. Încercați fiecare și vedeți care este cel mai potrivit pentru dvs. Principalul lucru este să alocați în mod corespunzător o clasă, astfel încât totul să funcționeze! Toate stilurile dintr-un singur fișier pot fi descărcate făcând clic pe butonul de mai jos.
Puteți conecta un astfel de fișier și elemente diferite pentru a instala diferite clase și diferite animații. În general, utilizați după cum doriți, principalul lucru este corect și la locul 🙂
Folosiți animație CSS pe site-ul dvs.?
Asta e tot, vă mulțumesc pentru atenția acordată. 🙂
că fără hover'a prescriu, iată blocul:
descriere portofoliu-animație-nume: descriere portofoliu;
-webkit-animation-name: portofoliu-descriere;
durata animației: 0,5s;
-webkit-animație-durată: 0.5s;
animație-funcția de sincronizare: ușurință în sus;
-webkit-animație-funcția de sincronizare: ușurință în interior;
vizibilitate: vizibil! important;
>
și când plutiți bine funcționează. dar când mutați cursorul - fără animație. dar în cazul în care hover să sculpt nu înțeleg
Bună dragă prietenă
Aveți extensia AdBlock sau altele asemenea. Adăugați site-ul meu pe lista albă și, prin urmare, contribuiți la dezvoltarea acestuia. Instrucțiunea cum să dezactivați AdBlock Vreau aceeași fereastră
Articole similare
Trimiteți-le prietenilor: