Bună ziua cititori blog dragi. În această zi, să vorbim despre, destul de, lucruri interesante, cum ar fi CSS Animații. Asta este, acest element de animație se face numai cu ajutorul unor stiluri și nici un script-uri nu sunt folosite aici.
Poate că atunci când animații CSS înlocuiesc tot felul de script-uri și plugin-uri JQuery. dar va fi în măsura în care nu mai curând, pentru că este încă o capacitate foarte limitată, în timp ce script-uri JQuery sunt nelimitate.
Singurul negativ este faptul că unele dintre vechile browsere (nu sunt actualizate) nu acceptă această metodă, și pentru IE (Internet Explorer), în general, am să tac. Dar lucrul cu un bang, mai ales dacă utilizați prefixe speciale, în general, această animație în cele mai populare browsere.
Vorbind de prefixe, le vom folosi în toate cazurile, ca să spunem așa, trebuie să fie asigurate:
- -o- - pentru browser-ul Opera;
- -moz- - pentru Firefox;
- -webkit- - pentru Google Chrome și Safari.
Acum, hai să aruncăm o privire mai atentă.
În acest caz, vom crea unitatea cea mai obișnuită cu o rezoluție de 200 x 100 pixeli, și apoi atașați-l la animație.
bloc normală
Pentru a adăuga o unitate la pagina pe care trebuie doar să adăugați
#box margin-bottom: 5px;
culoare de fundal: #ccc;
Culoare: # 333;
padding: 10px;
text-align: center;
lățime: 200px;
height: 100px;
frontieră: solid 1px # 888;
cursor: pointer;
>
#box: hover background-color: # 97CE68;
color: # 000;
>
După cum puteți vedea aici există un atribut: Hover. care se schimbă stilul de fundal atunci când situându-se, în unele cazuri, ar trebui să fie obligatorie.
culoare schimbare lină atunci când indică membru prin tranziție
padding: 10px;
text-align: center;
lățime: 200px;
height: 100px;
text-liniuță: 0px;
frontieră: solid 1px # 888;
-Moz-tranziție: culoare de fundal 0.8S 0.1s ușurință;
-O tranziție: culoare de fundal 0.8S 0.1s ușurință;
-webkit-tranziție: culoare de fundal 0.8S 0.1s ușurință;
cursor: pointer;>
După cum puteți vedea această animație, am realizat cu ajutorul atributului de tranziție. Puteți modifica viteza animației în secunde, în acest caz, este în valoare de 0.8S pentru a finaliza schimbarea culorii atunci când vă mutați și 0.1s înainte de începerea lucrărilor de animație după ce a subliniat cursorul și retracting. (Ne cerem scuze pentru puzzle :-)) Această valoare se poate schimba ca ai nevoie.
Culoarea de fundal atunci când hover atribut este pus: Hover. este obligatorie, în caz contrar, animația nu va funcționa.
Modificarea dimensiunii unui element
text-liniuță: 0px;
frontieră: solid 1px # 888;
-Moz-tranziție: toate liniar 1s;
-o-tranziție: toate liniar 1s;
-webkit-tranziție: toate liniar 1s;
cursor: pointer;>
În acest exemplu, am făcut o schimbare lină a dimensiunii blocului atunci când treceți. Valoarea standard, de la 200 la 100, iar valoarea hover este de 150 până la 50, care este definit atributul: hover.
Mai multe aici puteți schimba unitatea numai lățime sau înălțime, ai nevoie doar de a: hover elimina lățime: - blocul schimbat doar în înălțime, înălțime: - un bloc de modificări numai în lățime.
Puteți schimba, de asemenea, viteza de schimbare. În acest caz, 1c.
obiect de torsiune
padding: 10px;
text-align: center;
lățime: 200px;
height: 100px;
text-liniuță: 0px;
frontieră: solid 1px # 888;
-Moz-tranziție: toate 1s 0,1s ușurință în;
-O tranziție: toate 1s 0,1s ușurință în;
-webkit-tranziție: toate 1s 0,1s ușurință în;
cursor: pointer;>
# Box3: Hover background-color: # 97CE68;
color: # 000;
-webkit-transform: rotate (360deg);
-Moz-transform: rotate (360deg);
-o-transformata: rotate (360deg);
>
Torsiunea apare și transforma prin tranziție. În acest caz, obiectul este în sens orar răsucită cu 360 de grade, la o rată de o secundă. Dacă doriți să blocați se rotește în sens antiorar, în sensul de necesitatea de a pune o transformare - (minus). Bineînțeles, puteți schimba gradul de cifra de afaceri.
Creșterea graduală și diminuarea a obiectului
# Box4 margine-bottom: 5px;
culoare de fundal: #ccc;
Culoare: # 333;
padding: 10px;
text-align: center;
lățime: 200px;
height: 100px;
text-liniuță: 0px;
frontieră: solid 1px # 888;
-Moz-tranziție: toate 3s ușurință-out;
-O tranziție: toate 3s ușurință-out;
-webkit-tranziție: toate 3s ușurință-out;
cursor: pointer;>
In acest exemplu, lin crescut de 2 ori. Această valoare este setată transforma: scală (2). Dacă pui o valoare de 1,5, respectiv, o creștere în blocul va fi de 1,5 ori.
Aceeași metodă poate reduce dimensiunea blocului, de exemplu, pentru a pune o valoare de 0,5.
Unitate de deplasare descendentă lină
# Box5 margine-bottom: 5px;
culoare de fundal: #ccc;
Culoare: # 333;
padding: 10px;
text-align: center;
lățime: 200px;
height: 100px;
text-liniuță: 0px;
frontieră: solid 1px # 888;
-Moz-tranziție: toate 1s ușurința în-out;
-O tranziție: toate 1s ușurința în-out;
-webkit-tranziție: toate 1s ușurința în-out;
cursor: pointer;>
# Box5: Hover background-color: # 97CE68;
color: # 000;
-webkit-transform: traduce (0,50px);
-Moz-transform: traduce (0,50px);
-o-transformare: traduce (0,50px);
>
Aici mișcarea este setată în pixeli. În acest caz (0,50px). Puteți face, de asemenea, un bloc pentru a urca această valoare 0, -50px. Sau în diagonală în jos 50px, 50px. Într-o unitate de cuvânt poate fi făcută pentru a muta oriunde.
Asta e practic tot ce ai vrut să spui. Nu, nu toate :-) uitat să reamintească faptul că animații CSS pot fi aplicate la orice obiect de pe site-ul: la imagini, text, antete, icoane, etc. Aici sunt link-uri pentru perfecta schimbare de culoare netedă, în meu foarte frumos. -)
Și totuși, aceste informații partajate cu site-ul ne shpargalkablog.ru. Pentru că el Multumesc mult.
Acum, exact tot :-) Ne vedem în curând, prieteni.
Nu este sensul acelor de ceasornic, sulurile de fundal. Pictogramele sunt utilizate sprite. Dacă schimbați poziția de fundal și utilizarea fără probleme de tranziție - defilează în fundal când hover. Am nevoie pentru a obține prin schimbarea background-position - parcurgere într-o nouă poziție de fundal nu se întâmplă, și a fost un flux de icoane color spun №1 -> din №1: Hover.
Am realizat în subsolul acestui tip de lucru prin opacității de tranziție. Dar nu trebuia să sacrifice transparența 50%. Iar efectul a fost.
inițial de transparență nu poate fi schimbată cu pictograma din meniu. Deci, cred că - ceea ce ar face. Este cu siguranță posibil fără animație - dar nu este într-adevăr într-un fel. Și pentru fiecare backgroun poziția de a prescrie transparență - este de 24 de reguli. Doar uzhs aceeași)
Deci, doar pentru a face pictograma este înlocuită cu o alta ca se face de obicei prin CSS și, adăugați la pictograma de clasă, cu tranziția originală:
Sprite elimina și 12 icoane individuale fac? (0_0) I | I
Atunci nu utilizați tranziția. și încercați să utilizați un script care va face, deși script-urile, nu te pot ajuta.
Și da, vă mulțumesc pentru răspunsul dumneavoastră prompt! Acest lucru este foarte cool! ))
În Box2: plasați cursorul seta o înălțime fixă în pixeli, nu si masini
Un pic ceva. Sensul a fost tocmai în faptul că nu s-ar stabili o înălțime fixă de la: Hover înălțime a fost în funcție de conținutul. Aparent, este doar imposibil să pună în aplicare folosind doar css. Cred că, folosesc doar o altă soluție.
Mulțumesc.
Numai probabil CSS acest lucru nu se face. Am fost bucuros să vă ajute, deși nu a ajutat. )
„Creșterea graduală și scăderea obiectului“
Trebuie remarcat faptul că este posibil să se stabilească nu numai valori întregi, precum și pentru reglaj fin, valorile sutimi.
De exemplu:
-webkit-transformare: scală (1,05);
-Moz-transformare: scală (1,05);
-o-transformare: scală (1,05);
În cazul în care valorile din elementele css stabilite mai mică decât zero, se va intoarce impotriva.
exemplu:
-webkit-transformare: scală (0.5);
-Moz-transformare: scală (0.5);
-o-transformare: scală (0.5);