Animarea CSS și a caracteristicilor sale

Întrebând cum să faci o animație CSS, mulți utilizatori merg să găsească lecții și instrucțiuni. Și, deși veți găsi instrucțiuni similare aici, printre altele, vă vom oferi sfaturile utile în crearea animației folosind CSS.

Secretul desenelor ideale

Principalul sfat care poate fi acordat celor care vor să învețe complet, ce este animația netedă a CSS, este asta. Cu experimente zilnice cu bucăți de cod pregătite, încercați să efectuați propriile experimente. Într-un timp liber de la locul de muncă pe propriile site-uri, încercați să vedeți ce se întâmplă atunci când faceți o bucată de cod, pentru a studia o proprietate în întregime. Încercați să implementați tot felul de idei interesante utilizând instrumente de limbă complet diferite, iar animația CSS se va deschide pentru dvs. pe noua parte. Acest sfat simplu este următorul: experimentați-vă singur.

Afișarea animației CSS

Și acum, să trecem la exemple interesante. În mod obișnuit, utilizarea standard a animației este de a schimba liniștit anumite elemente ale site-ului în timp. Dar e prea drăguț, nu crezi? Prin urmare, aici vom împărtăși cu dvs. un mod extraordinar de a folosi timpul de apariție al animației.

Faptul este că schimbările actuale de pe site într-o animație sau în forma sa completă pot fi aproape instantanee. Pentru aceasta, atribuim două cadre cheie, dar folosim un interval foarte mic. De exemplu, acesta poate fi egal cu 0,001%. În acest caz, animația CSS se poate întâmpla instantaneu. Acest lucru este perfect pentru a imita orice semn de neon. Acest semn va bloca, iar dacă animația CSS folosește în continuare transparența și proprietatea umbră text, semnul va fi aproape ca unul real.

Iată un exemplu de cod.

Îmbunătățirea funcționalității butoanelor

Dacă luăm în considerare problema cât de neobișnuită este animația CSS a unui buton, atunci putem spune că există multe opțiuni pentru decorarea butoanelor pe site-uri web. Să luăm în considerare un exemplu. Efectul butonului convex presat. Exemplul de cod este de mai jos.

Cu această bucată simplă de cod, animația blocului CSS va arăta destul de bine. Arată foarte interesant și este adesea folosit pe site-uri diferite.

Animație CSS atunci când treceți peste un fragment de site

Cu cât site-ul este mai dinamic și mai modern, cu atât mai mult rămâne utilizatorul. În plus, interactivitatea joacă un rol important. Desigur, acest lucru este adevărat, dar ce poate ajuta site-ul să fie cât mai interactiv posibil?

Arată foarte bine lucrul cu designul elementelor și fragmentelor site-ului atunci când plasați mouse-ul. Animarea butoanelor când se hovering, am dezasamblat mai sus, dar în plus, puteți "revitaliza" și tot felul de bucăți ale site-ului, făcându-le cât mai elegante posibil. Ca în orice altceva, principiul principal aici nu este să exagerăm.

Deci, există o proprietate excelentă a tranziției, care poate dura până la patru proprietăți conexe.

Într-o anumită perioadă de timp, animația CSS atunci când plasați cursorul pe această bucată de cod se va schimba. Timpul este determinat de proprietatea duratei. Adică atunci când plasați cursorul peste un element, începe să schimbe într-un mod ciudat o proprietate pe care am cerut-o în selector. Pentru cazul nostru, acesta este elementul (punct înainte). Mai jos este un exemplu de cod care, atunci când se schimbă dintr-un container div care are o pseudo-clasă de tip hover, fundalul se schimbă de la roșu la verde.

Când plasați cursorul mouse-ul utilizatorului, animația CSS nu se schimbă imediat, dar cu o întârziere de o fracțiune de secundă, ceea ce creează un efect interesant.

În plus, dacă în exemplul anterior ați specificat o regulă conform căreia fundalul pentru elementul div ar trebui să se schimbe de la roșu și să meargă în verde timp de 0,4 secunde, trebuie să țineți cont de faptul că folosiți valoarea tuturor, puteți face referire la întreaga proprietate ca întreg imediat.

Codul exemplu este după cum urmează.

După cum se arată, proprietățile de umplutură și fundal vor avea un efect de tranziție determinat de proprietatea de tranziție. Trebuie să rețineți că puteți specifica un anumit set de valori separate prin virgule.

Câteva nuanțe de utilizare a acestui tip de animație pe butoane

În principiu, în general, nu este atât de important în ce ordine aceste valori vor fi indicate și enumerate. Cu excepția cazului. Putem face față proprietății întârzierii. În acest caz, trebuie să specificăm durata de timp. Cu alte cuvinte, va trebui să furnizăm în cod cât va avea loc întârzierea de care avem nevoie.

Amintiți-vă, totuși, că unele proprietăți nu pot avea efectul de tranziție. Asta este, ei nu pot fi de tranziție. Acest lucru se datorează faptului că acestea nu mai pot fi animate.

Text animație

Cu ajutorul codului pot fi setate și animație excelentă a textului CSS. Acesta poate fi un articol și un titlu major, titlul site-ului. După cum sa menționat deja mai sus, principalul lucru nu este să exagerăm și să nu transformăm site-ul într-un depozit care va arăta ieftin.

Ei bine, hai să încercăm să aflăm ce este animația textului CSS și să-l creați și umbrele de text. Poate că ați văzut filme de groază în care numele picturilor în sine păreau să se estompeze pe un fundal sumbru și întunecat. Să încercăm să recreăm ceva similar în exemplul general.

Animați textul în stilul filmelor de groază

De fapt, chiar ideea este de a face un text în care literele să fie ușor neclare și să se rotească. Trebuie să existe spațiu între litere. Vom folosi umbra inter-scrisoare, precum și un interval. Pentru a implementa ideea, avem nevoie de un script Lettering.js de Dave Rupert. Este necesară înfășurarea cuvintelor și a literelor în mai multe etichete de span. În primul rând, trebuie să introduceți fraze în eticheta h2. Iată un exemplu de cod.

Apoi, înfășurați toate cuvintele din etichetele h2 din eticheta Span.

Se va întâmpla așa.

Va arata cam greoaie, dar nu va fi jenat de ea.

Obțineți o structură destul de nebună.

Ca rezultat, vom împacheta fiecare dintre literele pe care le avem în eticheta de span. S-au dovedit foarte mult. Dar în codul de mai sus, exemplul este destul de simplist. Puteți scrie singur întreaga structură și va fi ceva mai mare. De asemenea, depinde de textul pe care îl veți folosi.

Finalizați munca noastră cu o mică stilizare. Toate rubricile noastre din exemplul de mai sus vor fi situate în lățimea totală a ecranului. Și vor ocupa aproape tot spațiul liber.

Deoarece vom plasa toate scrisorile noastre în centrul ecranului, pentru containerul nostru avem nevoie și de un flexbox.

Să dăm un exemplu de cod.

Acum am făcut ca toate literele care sunt înfășurate în clasa span, care aparțin clasei părinte .os-phrases, vor fi localizate și vor fi fixate exact în centru.

Nu uitați să adăugați un pic de spațiu liber, adică spațierea între litere.

În acest caz, primul wrapper va avea o anumită proprietate suplimentară. Această proprietate este perspectivă. Ne va permite să facem acest lucru, astfel încât această secțiune să se evidențieze, să se evidențieze, să vină în prim plan.

Aceleași litere ale noastre vor fi transparente și vom rula intervalul de animație undeva în 5,2 secunde. Mai jos este un exemplu de cod.

De asemenea, este important să determinăm cum și cu ce întârziere vor apărea ofertele și frazele noastre. Care parte a textului va apărea mai repede decât cea anterioară și cât de mult. Codul va arăta astfel.

Vom da un efect mic, dar foarte curios. Setați opacitatea la 0,2. Distanta dintre litere va fi destul de mare. Literele vor fi de asemenea ușor rotite de-a lungul axei Y. Tu și utilizatorii site-ului dvs. veți vedea doar o mică parte din aceste litere. De asemenea, nu uitați să dați efect proprietății text-shadow. Jumătate din animație, vom face un lucru neobișnuit. Vom ascuți literele în sine și, de asemenea, vom reduce distanța dintre ele, vom crește opacitatea și apoi vom întoarce semnele la 0 de-a lungul axei Y.

În final, vom adăuga din nou literele dispărute și le vom scala oarecum. Acest lucru va da din nou un efect de estompare mic.

Și, în final, ultima frază de animație CSS.

Și da, adăugați în cele din urmă atingerea finală. Ne vom concentra pe câteva cuvinte specifice. Ei vor avea un semn de grăsime. Acest lucru va da accentul necesar.

Nu uitați de sursele de inspirație

Când încercați să experimentați proprietățile și animațiile CSS, încercați să găsiți inspirație în tot ceea ce se întâmplă în viața de zi cu zi. Poate fi orice, de la o pagină web interesantă până la un efect video minunat.

În plus, dacă nu te uiți la modul în care se face acest sau acel efect și încerci să îl recreezi singur, poți obține rezultate excelente. Sau, cel puțin, aflați întotdeauna ceva mai mult despre capacitățile limbajului de programare pe care îl utilizați. Chiar ideea că nu ați implementat pe deplin poate fi foarte eficientă.