Bună ziua, dragi cititori de blog-ul meu. Astăzi vă voi arăta cum să facă folosind css text clipitor. De fapt, este destul de ușor de realizat, acum îți voi arăta calea corectă.
Vechi și opțiune greșită
Deci, înainte de a textului intermitent poate fi setat cu proprietatea:
Toate dintre noi, webmasteri și dezvoltatorii sunt în mod constant de lucru cu site-urile. Eu v-ar dori să recomande un site care se bucură:- Reg.ru - sunt înregistrate și prelungi nume de domenii, o companie foarte de incredere!
- HostIQ - hosting de calitate premium.
- Ihor - un buget mai mare, dar, de asemenea, foarte de înaltă calitate, furnizor de web hosting.
- Telderi.ru - singurul schimb de încredere în RuNet, în cazul în care puteți cumpăra site-uri gata făcute cu venituri!
Cu toate acestea, IE nu acceptă această caracteristică. În plus, funcționează prost, și în browserele moderne. Dar cea mai mare problemă a acestei metode este că pur și simplu nu se poate regla intermitent, selectați culoarea, frecvența, etc. Acum vom considera o metodă care să țină cont de toate acestea și permite un set foarte flexibil până să clipească.
Noi facem cu animație
Vom folosi animația, are nevoie pentru a crea un set de cadre, care descrie efectul, și apoi aplicați-l la elementul dorit. Mai multe despre animație, voi scrie în viitor, dar astăzi eu sunt doar de gând să-ți arăt la recepție. Deci, vom face astfel încât textul își schimbă culoarea și se întâmplă tot timpul. Crearea unui set de cadre:
Acest cod este scris în fișierul css într-o locație arbitrară. Aceasta înseamnă următoarele: la începutul animație (cuvântul cheie din), culoarea textului va fi de culoare albă, iar în cele din urmă - verde. Acum, imaginile sunt create și au nevoie pentru a le conecta cu textul. De exemplu, în HTML codul nostru este o astfel de piesă:
Unitatea set unele proprietăți de bază, dar nu este în ele. Pentru a asocia imaginile cu elementul care aveți nevoie pentru a scrie următoarele:
animație nume: clipire;
animație-durată: 1s;
Aceste două proprietăți necesare pentru a lucra de animație. După cum vă amintiți, am numit noastre cadrele cheie - clipit. astfel încât aceasta este valoarea înscrisă în numele. Durata este executarea întregii animație. Cel mai mic este, cu atât mai mult va fi mai rapid. Prin urmare, dacă ai pus 0,2 secunde, clipirea este foarte rapid și ascuțite.
Acum, dacă vă actualizați pagina, animația va rula, dar numai o singură dată, și noi, de fapt, trebuie să clipească. Pentru a-l pune în aplicare, aveți nevoie pentru a face o nesfârșită repetare a animației. Pentru a face acest lucru, adăugați următorul cod:
Această proprietate este responsabil pentru numărul de repetiții ale animației. Aici puteți seta o valoare numerică, dar seturi infinit reluarea fără sfârșit. Deci, am implementat intermitent. După cum se pare, puteți vedea aici:
Dacă aveți nevoie de o transfuzie de mai multe culori, puteți pur și simplu schimba cadrele:
Acum, culoarea textului va fi în primul rând alb, apoi gri, în cele din urmă - negru. Puteți adăuga orice alte efecte de text, sublinia, schimba marca, umbre etc. Dacă doriți să faceți toate proprietățile de animație disponibile în versiunile mai vechi de browsere, este necesar să le duplica cu -webkit prefix.