Rularea linie capabil să afișeze informații în format dinamic luminos folosind o varietate de efecte speciale, atrăgând o atenție considerabilă. De exemplu, informațiile se pot deplasa de sus în jos și de jos în sus, dreapta la stânga și la stânga la dreapta, înainte și înapoi, înainte și înapoi, lent și rapid, care rulează doar o singură dată, și apoi a lăsat ca text simplu. Pe rând pot fi imprimate mai multe linii.
În cea mai simplă versiune, textul "pur și simplu" rulează, trecând de la dreapta la stânga. Foarte des, în plus față de textul simplu, liniile de rulare pot genera grafică simplă și pot impune diferite efecte asupra textului afișat.
animație CSS vă permite să utilizați definiția unei funcții de animație timp, care decide modul în care se va dezvolta până la sfârșit. Una dintre aceste funcții se numește determinarea etapelor de timp () și vă permite să alocați un număr de cadre de animație, se va elimina de obicei vă va crea o animație netedă și de animație cu o oarecare întârziere - în exact, ceea ce avem nevoie pentru a introduce text.
Folosind funcția pași (), puteți crea o animație care trebuie doar să mărească dimensiunea elementului de la zero la dimensiunea completă la sfârșitul paragrafului.
Începem prin crearea unui paragraf care să demonstreze lucrul procesului de imprimare animat.
Cu CSS, vom adăuga animația dorită. Apoi, adăugați un overflow de supracurent ascuns pentru a modifica dimensiunea paragrafului la 0, astfel încât să nu putem vedea textul. În cele din urmă, puteți adăuga animație de introducere a textului utilizând funcția pași ().
Animația va mări dimensiunea paragrafului de la 0 la 100%, creând astfel, în 50 de cadre, efectul tipăririi textului.
Uită-te la demo pentru a vedea cum arată.
Creeping line cu ajutorul animației pe CSS3.
- pas - numele de animație (opțional)
- 5s - Timp de animație
- pași (50) - Numărul de "cadre" ale animației
- infinit - repetare infinită (pentru claritate)
E ca și cum o mașină de scris. Și acum vom face această linie să se miște, doar scrie text-align: right; sau text-align: center; iar linia "rulează" spre dreapta sau doar spre centru, respectiv.
Modificări și adăugiri în stiluri și rezultate (dacă animația sa încheiat - reîncărcați pagina):
Creeping line cu ajutorul animației pe CSS3.
Creeping line cu ajutorul animației pe CSS3.
Creeping line cu ajutorul animației pe CSS3.
Animation începe funcționarea lor imediat după deschiderea paginii și după sfârșitul buclei (în exemplele de mai sus a fost repetată de 3 ori) sunt oprite (cu excepția primului exemplu, sunt incluse „infinit“ redare infinit) și începe să lucreze o dată pe reload pagină.
Pentru ca animațiile să înceapă să funcționeze așa cum apar pe pagina din următorul articol. .
De asemenea, pe acest subiect puteți citi:
Trimiteți-le prietenilor: