Orei bune din timpul zilei. 🙂
Recent am fost rugat să organizez o linie de alergare pe site. Esența problemei a fost că persoana a vrut să actualizeze linia existentă, care a fost organizată folosind o etichetă HTML învechită
De ce a fost decisă actualizarea și remodelarea liniei existente. Faptul este că, înainte de a face defilare, utilizați tag-ul HTML care este acum considerat caduc, iar utilizarea sa nu este recomandată, deoarece în HTML5 nu este.
Navigatorii încă o susțin, dar cât timp va fi procesată marca? De aceea, pentru a nu risca, merită să o abandonați și, dacă linia de alergare este încă necesară pentru dvs., atunci puteți să o faceți cu CSS. Rezultatul este următorul:
După cum puteți vedea, rezultatul este același ca și atunci când utilizați vechea etichetă de marcă. Ea face ca linia târzie să fie foarte simplă. Trebuie să închideți elementul care trebuie să se deplaseze în jurul ecranului în blocul la care atribuim clasa marquee. De asemenea, în interiorul blocului de marcaj, închidem totul în etichetă .
Apoi, scrieți doar stiluri acestui bloc, plus animația, care va efectua mișcarea liniei.
Există câțiva parametri principali, ceilalți se pot schimba deja și pot adăuga propriile lor. Mai întâi, stilurile pentru blocul părinte.
- lățime: 100%; - Setați lățimea marcajului blocului principal.
- spațiu alb: acum; - Nu permitem transferarea cuvintelor pe altă linie.
- overflow: ascuns; - Tăiați tot ce merge pentru blocul nostru cu o linie de alergare, astfel încât să nu existe incidente.
Stiluri următoare pentru interval:
- afișare: inline-block; - face elementul nostru de spanline-bloc
- umplutură-stânga: 100%; - Am indentat stânga la întreaga lățime a blocului părinte.
- -webkit-animație și animație - aplicați animație blocului. Timpul de animație este de 10 secunde. Puteți schimba semnificația proprie.
- @ -webkit-keyframes marquee și @ keyframes marquee - animația însăși.
Este vorba despre parametrii de bază. După cum sa menționat mai sus, puteți adăuga orice alte stiluri.
Cu toate acestea, mulți consideră că linia de alergare este un element depășit. La urma urmei, odată cu dezvoltarea HTML și CSS, s-au deschis noi oportunități și un fel de animație pe site a devenit mult mai ușor. Linia de accesare cu crawlere este pur și simplu depășită. Dar totuși, mulți continuă să o folosească și, după cum arată practica, adesea în tendințe revine ceea ce a fost odată.
Asta e tot, vă mulțumesc pentru atenția acordată. 🙂
Dacă ai putea folosi munca mea, poți susține site-ul :)
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: