Uneori, soluțiile de design neobișnuite îl obligă pe designerul de layout să recurgă la același lucru soluții nestandardizate la poziţionarea textului. De exemplu, rotiți unul dintre elemente de text la un anumit unghi. Acest articol va acoperi mai multe solutii simple aceasta sarcina.
Înlocuirea textului cu o imagine
Cea mai primitivă soluție la această problemă va fi folosirea unei imagini. Înseamnă binecunoscută tuturor programe Adobe Text Photoshop se rotește cu ușurință în orice unghi. După cum vă puteți imagina, nu este nevoie de multă minte pentru a utiliza această metodă.
În unele situații, este imposibil să folosești o altă metodă, dar în majoritatea cazurilor se îndepărtează de la utilizarea unei imagini. Acest lucru se datorează unui număr de dezavantaje care însoțesc această tehnică:
- Incapacitatea utilizatorului de a copia informații în containerul specificat;
- Complexitatea procedurii de efectuare a corecțiilor la partea de text element;
- Traficul pe serverul site-ului este în creștere;
- O creștere a cererilor către server la actualizarea unei resurse.
În ciuda faptului că există atât de multe aspecte negative ale utilizării unei imagini, metoda are câteva efecte pozitive.
- Compatibilitate între browsere- fără probleme la afișarea în browsere diferite.
- Capacitate mare de poziționare a imaginii.
Inca inauntru în acest caz laturi negative depășește. Vă sfătuiesc să apelați la alte soluții.
Folosind proprietatea de transformare CSS
Aplicarea acestei metode este mult mai mare în comparație cu imaginea. O diferență semnificativă oferă flexibilitate în editarea textului și capacitatea de a selecta și copia conținutul unui container rotit. Principala piatră de poticnire pentru dezvoltarea acestei tehnici a fost compatibilitatea între browsere. Am ajuns destul de bine acum pe acest front, ceea ce face ușoară aplicarea proprietății transform.
Esența proprietății este împărțirea planului în grade. În consecință, la specificarea unui anumit unghi, containerul va lua poziția corespunzătoare. Este de remarcat faptul că proprietatea în formă pură nu se aplica. Ar trebui să fie însoțit de proprietățile furnizorului, care, de fapt, oferă o compatibilitate ridicată între browsere.
Este important de reținut că nu textul din interiorul blocului schimbă poziția, ci blocul în sine, căruia i se adresează proprietatea prin selectorul de clasă sau într-un alt mod. Mai jos este un exemplu de utilizare a metodei
Container (- moz- transform: rotire (- 45 grade); - webkit- transform: rotire (- 45 grade); - o- transform: rotire (- 45 grade); - ms- transform: rotire (- 45 grade); transformare: rotire ( - 45 de grade);)
Ca rezultat, obținem ceva de genul acesta:
Mă refer la această proprietate, designul va fi afișat fără probleme în Firefox, Opera, Internet Explower și alte browsere webkit.
Contactarea prin Javascript
Esența procesului este complet similară cu cea discutată înainte de această metodă. Pentru a-l implementa, aveți nevoie de un minim de cunoștințe de js-code, matematică și o înțelegere a filtrului Matrix.
Javascript
var deg2radians = Math. PI * 2/360, grade = - 4; rad = deg * deg2radians, costheta = Math. cos (rad), sintheta = Math. sin (rad); jQuery ("". rotatedBlock"). css ((filtru: "progid: DXImageTransform.Microsoft.Matrix (M11 ="+ costheta + ", M12 =" + (- 1) * sintheta + ", M21 =" + sintheta + ", M22 =" + costheta + ", SizingMethod =" extindere automată ", activat = adevărat)"} ) ;
Ca rezultat, obținem aceeași imagine în browser ca atunci când folosim proprietatea transform.
Chiar dacă nu înțelegeți un simbol în această intrare, nu contează. Pentru a lucra cu acest cod, este suficient să înțelegeți că valoarea unghiului este scrisă în a doua linie, o înlocuiți pentru dvs., restul - doar copiați-l fără modificări.
Particularitățile utilizării Javascript și CSS
Aceste două metode au câteva diferențe minore în principiul muncii, care este foarte important de cunoscut și luat în considerare.
Prima diferență se bazează pe diferența de înălțime și poziție a blocului. Ieșirea din situație este destul de simplă și constă în folosirea proprietății marginii. Indentăm blocul la nivelul cerutși poziție. Alte neconcordanțe de poziționare pot fi rezolvate prin atribuirea unei valori de poziționare absolută blocului, care funcționează și ea eficient.
O abordare mai complexă și individuală se bazează pe utilizarea proprietății de origine a transformării. Esența acestei tehnici va fi descrisă în articolele următoare.
Următoarea diferență constă în esența virajului în sine. Când utilizați codul js, punctul de pivotare este la marginea blocului. În a doua metodă, acest punct este situat în centrul elementului. Pentru ușurință de înțelegere, priviți imaginea de mai jos.
- Traducere
Buna draga habradrug! Există multe exemple de transformări și tranziții grozave în CSS3 pe internet. În acest articol, vom trece peste elementele de bază ale CSS3 și vom învăța cum să creați așa ceva. Acest tutorial va fi util pentru cei care tocmai au început să se familiarizeze cu CSS3. Să începem!
Sistem de coordonate
Pentru a înțelege mai ușor cum funcționează mișcarea unui obiect, vom lucra într-un sistem de coordonate.
Cu toate acestea, sistemul nostru de coordonate are o particularitate: axa y este îndreptată în direcția opusă decât de obicei. De ce? Faptul este că HTML și CSS (împreună cu, de exemplu, ActionScript) folosesc sistemul de coordonate invers, deoarece pagina web începe din stânga colțul de susși coboară.
Nota: Vom presupune că ești deja familiarizat Structura HTMLși CSS. Voi sări peste explicațiile despre modul de configurare fișier CSS cum se plasează imagini etc. Ne vom concentra pe animarea imaginilor. Dacă nu ești sigur de abilitățile tale nivel inalt, atunci vă sfătuim să aruncați o privire asupra cursului de lecții „HTML și CSS în 30 de zile” (gratuit și la limba engleză) pentru a învăța tot ce trebuie să știi.
1: Mișcare orizontală
Prima mișcare pe care o vom demonstra este orizontală. Vom muta obiectele de la stânga la dreapta și de la dreapta la stânga.Deplasarea spre dreapta
Pentru a muta obiectul vom folosi transforma: traduce (x, y), unde X - număr pozitivși Y = 0.
HTML
Deschideți editorul de coduri preferat și introduceți următoarele:
Am definit trei clase pentru imagine:
- obiect: Stabilirea regulilor principale ale obiectului nostru.
- van: Vom folosi diverse obiecte pentru a demonstra fiecare tip de animație.
- move-right: Folosind această clasă, ne vom muta obiectul.
Mai întâi, vom plasa obiectul nostru (imaginea camionului) în centru.
.obiect (poziție: absolut;) .dubiță (sus: 45%; stânga: 44%;)
În acest exemplu, vom deplasa obiectul 350px spre dreapta. Sintaxa folosită transforma: traduce (350px, 0);... În plus, obiectul se va mișca doar când treci cu mouse-ul peste el: #axa: hover .mutare-dreapta.
#axis: hover .move-right (transform: traducere (350px, 0); -webkit-transform: traducere (350px, 0); / ** Chrome și Safari ** / -o-transform: traducere (350px, 0) ; / ** Opera ** / -moz-transform: traducere (350px, 0); / ** Firefox ** /)
Parametru transforma va muta obiectul doar dintr-un punct în altul, dar nu va crea o animație această mișcare... Pentru a remedia acest lucru, trebuie să adăugați un parametru de mutare în clasa .object.
Obiect (poziție: absolută; tranziție: toate 2s ease-in-out; -webkit-transition: toate 2s ease-in-out; / ** Chrome și Safari ** / -moz-transition: toate 2s ease-in-out; ; / ** Firefox ** / -o-tranziție: toate cele 2 ease-in-out; / ** Opera ** /)
Această regulă de mutare va spune browserului să se anime toate parametrii obiectului activați 2 secunde(fără întârziere) folosind funcția ușurință-in-out.
Putem folosi 6 funcții diferite de sincronizare a mișcării:
- liniar: se produce deplasarea viteza constanta de la început la sfârșit.
- uşura: Mișcarea începe încet și apoi crește viteză.
- ușurință: Mișcarea începe încet.
- uşurare: Mișcarea se termină încet.
- ușurință-in-out: Mișcarea începe și se termină încet.
- cubic-bezier: definirea manuală a valorii deplasării.
Deplasarea spre stânga
Pentru a muta un obiect la stânga, trebuie doar să puneți sens negativ la axa OH, in timp ce Y ramane neschimbat. În cazul nostru, vom muta obiectul în - 350px La stânga.
HTML
Crea document nou html și lipiți următorul cod:
De data aceasta folosim clasa mută la stânga, pentru a întoarce obiectul la stânga.
CSS
Acum să introducem -350px pentru axa OX. transforma: traduce (-350px, 0);- mutați obiectul spre stânga.
#axis: hover .move-left (transform: translate (-350px, 0); -webkit-transform: translate (-350px, 0); / ** Safari & Chrome ** / -o-transform: translate (-350px) , 0); / ** Opera ** / -moz-transform: traducere (-350px, 0); / ** Firefox ** /)
Deoarece am definit deja regulile de mutare mai devreme, nu trebuie să o facem din nou.
2: Mișcare pe verticală
Deplasarea unui obiect pe verticală nu va fi dificilă, deoarece este identic cu cel orizontal. Singura diferență este că vom folosi valoarea -y pentru a trece în sus și a valorifica y să se deplaseze în jos.În sus
HTML
Șablonul HTML este identic cu exemplele anterioare. Cu toate acestea, vom înlocui obiectul nostru cu o rachetă (pentru claritate) și vom atribui o clasă de mutare.
CSS
La fel ca și camionul, vom centra racheta:
.rachetă (sus: 43%; stânga: 44%;)
După cum am observat mai devreme, coordonata Y trebuie să fie negativă. În cazul nostru, vom muta obiectul cu 350 px în sus.
#axis: hover .move-up (transform: traducere (0, -350px); -webkit-transform: traducere (0, -350px); -o-transform: traducere (0, -350px); -moz-transform: traduce (0, -350px);)
Mișcându-se în jos
Ai ghicit, pentru a deplasa obiectul în jos, coordonata Y trebuie să fie pozitivă și coordonata X egală cu 0. Sintaxă: traduce (0, y);
HTML
CSS
#axa: hover .move-down (transform: translate (0.350px); -webkit-transform: translate (0.350px); -o-transform: translate (0.350px); -moz-transform: translate (0.350px); )
3: Mișcare în diagonală
Pentru a muta obiectul în diagonală, vom potrivi parametrii Xși y... Sintaxa va fi următoarea: transforma: traduce (x, y).În funcție de direcție, valoarea Xși y poate fi atât pozitiv, cât și negativ.
HTML
CSS
#axis: hover .move-ne (transform: traducere (350px, -350px); -webkit-transform: traducere (350px, -350px); -o-transform: traducere (350px, -350px); -moz-transform: traduce (350px, -350px);)
4: Rotire
Rotația în CSS3 este controlată de coordonatele de grade (de la 0 ° la 360 °). Pentru a roti un obiect, aplicați următoarele opțiuni: transformare: rotire (ndeg); Unde n- grade.
Rotire în sensul acelor de ceasornic
Pentru a roti obiectul în sensul acelor de ceasornic, aplicați o valoare pozitivă pentru rotire (ndeg).HTML
CSS
#axis: hover .rotate360cw (transform: rotire (360deg); -webkit-transform: rotire (360deg); -o-transform: rotire (360deg); -moz-transform: rotire (360deg);)
Rotire în sens invers acelor de ceasornic
Pentru a roti obiectul în sens invers acelor de ceasornic, aplicați o valoare negativă rotire (ndeg).
HTML
CSS
#axa: hover .rotate360ccw (transform: rotiți (-360deg); -webkit-transform: rotiți (-360deg); -o-transform: rotiți (-360deg); -moz-transform: rotiți (-360deg);)
5: Scalare
Scalare este caracteristică interesantă CSS3. Folosind parametrul scara (n) sau parametru scara (x, y), putem fie să creștem, fie să micșorăm obiectul direct în cadru HTML... Obiectul se va redimensiona pe baza valorii n / x, y, unde axa X este lățimea și Y este înălțimea.Să aruncăm o privire la următorul exemplu.
Astăzi vom arunca o privire la un efect atât de minunat care ne este disponibil datorită CSS3. Este despre rotirea unui bloc sau a unei imagini. El sa amestecat uimitor în interfața site-ului și, după ce a stăpânit această lecție, puteți aplica acest efect și în proiectele dvs.
Deci, avem un set de blocuri cu ceva conținut. Dorim ca atunci când trecem peste un bloc, acesta să se rotească în jurul axei sale și să afișeze informații pe spate. Cred că toată lumea a jucat cărți cândva și toată lumea își amintește de acel moment emoționant în care a fost necesar să le întoarcă cu susul în jos. Vom face la fel și acum. Aici este a noastră exemplu original:
Să începem să scriem CSS-ul nostru. Primul lucru pe care trebuie să-l facem, deoarece lucrăm cu transformări 3D, este să setăm distanța obiectului nostru din punct de vedere. Și iată primul cod de rahat:
Flip-container (-webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspectiva: 1000;)
Puteți seta orice alt număr. Experimentează-te singur. Pentru părțile din față (.față) și din spate (.spate) ale noastre carte de joc trebuie să întreb poziționare absolută astfel încât acestea să se „suprapun” între ele în poziția finală. De asemenea, trebuie să facem partea din spate elementele inversate nu au fost afișate în timpul animației. Proprietatea de vizibilitate a feței din spate ne va ajuta cu aceasta:
Față, .spate (-webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; lățime: 100%; înălțime: 100%; poziție: absolut; sus: 0; stânga: 0;)
Să setăm indexul z pentru partea din față (astfel încât să fie în partea de sus în starea implicită) și să descriem unghiurile implicite de rotație în jurul axei verticale:
/ * fața este plasată deasupra spatelui * / .front (-webkit-transform: rotițiY (0deg); -moz-transform: rotițiY (0grade); -ms-transform: rotițiY (0deg); -o-transform: rotițiY ( 0deg ); transform: rotateY (0deg); z-index: 2;) / * spate, partea ascunsă inițial * / .back (transform: rotateY (180deg); -webkit-transform: rotateY (180deg); -moz-transform : rotițiY (180deg); -ms-transform: rotițiY (180deg); -o-transform: rotițiY (180deg);)
La trecerea cu mouse-ul, cărțile noastre se vor roti, unghiurile laturilor lor se vor schimba de la 0 la 180 de grade și de la 180 de grade la 0:
/ * partea frontală este plasată deasupra spatelui * / .flip-container: hover .front (transform: rotateY (180deg); -webkit-transform: rotateY (180deg); -moz-transform: rotateY (180deg); -ms- transform: rotițiY (180deg); -o-transform: rotițiY (180deg);) / * înapoi, partea ascunsă inițial * / .flip-container: hover .back (-webkit-transform: rotițiY (0deg); -moz-transform : rotițiY (0deg); -ms-transform: rotițiY (0grade); -o-transform: rotițiY (0grade); transformați: rotițiY (0grade);)
Suntem aproape de a ne finaliza munca. Rămâne doar să explicăm browserului cum elemente copil trebuie redate în spațiu 3D. Această proprietate trebuie utilizată împreună cu proprietatea transform și se numește transform-style. Această proprietate ar trebui aplicată blocului cu clasa .flipper, nu .back și .front, altfel vom avea o surpriză neplăcută în browser-ul Opera.
Flipper (-webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: conserva-3d;)
Ura, am reușit. Tocmai am învățat cum să rotim cu CSS. Cel mai bine, toată lumea o susține. browsere moderne... Da, da, utilizatorii în Internet Explorer pot vedea și această frumusețe începând cu versiunea 10. Din păcate, în Rusia există o practică vicioasă de a trage de-a lungul unui șir de IE8 și IE9 învechite. Așa că clientul meu a dorit să fie afișat un sfat explicativ în momentul trecerii cursorului în browserele mai vechi. Să vedem ce putem face.
Primul lucru care vă vine în minte este să folosiți directiva @supports. Am putea scrie:
@supports (transform-style: preserve-3d) sau (-moz-transform-style: preserve-3d) sau (-webkit-transform-style: preserve-3d) (/ * stiluri pentru browsere care acceptă * / / * 3D transformă * /)
Vai și ah, chiar și IE 11 nu știe nimic despre asta, așa că haideți să folosim modul de modă veche:
În fișierul ie.css, vom descrie stilurile necesare pentru balonul nostru. Nu o voi include aici, pentru că este dincolo de scopul acestui articol (și nu este nimic interesant acolo). Puteți vedea acest lucru în exemplul nostru de rotație verticală CSS, dacă doriți. Dar dacă suntem interesați de rotația orizontală? În acest caz, codul nostru este transformat astfel:
Vertical.flip-container (poziție: relativ;) .vertical.flip-container .flipper (-webkit-transform-origin: 100% 213.5px; -moz-transform-origin: 100% 213.5px; -ms-transform-origin : 100% 213,5 px; originea transformării: 100% 213,5 px;) .vertical.flip-container: hover .back, .vertical.flip-container.hover .back (-webkit-transform: rotateX (0deg); -moz -transform: rotițiX (0deg); -o-transform: rotițiX (0grade); -ms-transform: rotițiX (0grade); transformați: rotițiX (0grade);) .vertical .back, .vertical.flip-container: hover. front, .vertical.flip-container.hover .front (-webkit-transform: rotițiX (180deg); -moz-transform: rotițiX (180deg); -o-transform: rotițiX (180deg); -ms-transform: rotițiX ( 180deg); transformare: rotireX (180deg);)
Funcția de rotație () în CSS efectuează o transformare de rotație bidimensională pe un element în jurul unui centru fix. În acest caz, blocul nu se deformează și nu afectează poziția containerelor HTML adiacente. Metoda vă permite să specificați unghiul de rotație. În plus, este posibil să setați un centru arbitrar de rotație.
Transformarea blocului
În CSS, rotire () este o funcție de transformare, deci trebuie transmisă proprietății de transformare a elementului.
Element (transformare: rotire (45deg);)
Primul și singurul argument este unghiul la care va fi rotit obiectul. Rotația se realizează în spațiu bidimensional. Pentru transformările 3D, există funcții în CSS rotateX (), rotateY (), rotateZ () și rotate3d ().
Spațiul ocupat inițial de elementul din pagină rămâne rezervat acestuia. Mișcarea vizuală are loc într-un nou strat fără a muta blocurile adiacente.
Unghiul de rotație
Argumentul unghi transmis metodei trebuie să fie de tip CSS
Un unghi pozitiv determină rotirea obiectului în sensul acelor de ceasornic, negativ - în sens opus.
Centrul de rotație
În mod implicit, blocul este rotit în jurul centrului său geometric. Pentru a schimba acest punct, trebuie să utilizați proprietatea transform-origin.
În mod implicit, este nevoie de trei parametri care definesc coordonatele X, Y și Z. Dar, deoarece rotirea () în CSS este o transformare bidimensională, trebuie să treceți doar două valori.
Element (transformare: rotire (45deg); origine-transformare: 20px 100%;)
Coordonatele de-a lungul fiecărei axe pot fi specificate în orice unități de lungime valide, ca procent din dimensiunea blocului sau folosind Cuvinte cheie sus, jos, stânga, dreapta. Originea este situată în colțul din stânga sus al containerului dreptunghiular.
Animație de rotație
Proprietatea de transformare se pretează bine la schimbări dinamice, prin urmare CSS permite animației să rotească un element în spațiul bidimensional.
Dacă trebuie să rotiți un obiect ca răspuns la o anumită acțiune personalizată, cum ar fi trecerea cu mouse-ul peste cursor, puteți utiliza Proprietatea CSS de tranziție, care determină modificarea întârziată a valorii altor proprietăți.
Element (tranziție: transform 2s;) element: hover (transform: rotație (180deg);)
LA element original nu se aplică transformări, dar trecerea cu mouse-ul deasupra acestuia va roti fără probleme blocul la 180 de grade timp de două secunde. Când utilizatorul îndepărtează cursorul, aceeași rotație lină va avea loc în poziția inițială.
Mai mult într-un mod dificil animația unui obiect este de a defini o secvență de modificări ale cadrelor pentru acesta folosind proprietățile și regula @keyframes.
Element (nume-animație: rotire; durată-animație: 2 secunde; număr-iterație-animație: infinit; funcție de sincronizare-animație: liniar;) @keyframes se rotesc (de la (transformare: rotire (0grade);) la (transformare: rotire (360 de grade);))
O animație de rotire este aplicată elementului specificat, făcându-l să se rotească complet de la 0 la 360 de grade în două secunde. Proprietatea animation-iteration-count setează animația să se repete la nesfârșit, iar funcția animation-timing-setează efectul de tranziție lină. Combinarea proprietăților cu transformările de rotație vă permite să creați efecte dinamice frumoase.
Datorită faptului că CSS evoluează într-un ritm rapid, a devenit și mai ușor să creați animații fără folosind Javascript Pe multe site-uri au apărut elemente foarte interesante, de care nu se poate să nu fie interesat. În tutorialul de astăzi, vom vedea cum puteți crea animație folosind cadre cheie (este chiar mai interesant decât doar folosind folosind CSS transformări). De asemenea, animația noastră nu va fi doar în același plan, ci va avea un efect 3D. Dacă nu știi de ce și unde poți aplica un astfel de efect, mergi la știrea completă și acolo îți voi spune despre asta.
Dacă CSS se transformă din seria de tutoriale anterioare în care a lucrat Browsere Firefox, Chrome, Safari și Internet Explorer 10+, atunci când creați animație 3D, aceasta va funcționa numai în browserele WebKit și Browser Mozilla... Cel mai transformări simple va funcționa și în IE10, dar ceva mai complex nu va funcționa, deoarece acest browser nu acceptă opțiunea preserve-3d pentru crearea de straturi 3D.
Animație CSS
Animația pe care o vom crea va conține o imagine care se rotește în jurul axei Y:
Grozav?!
Pentru cei fără animație 😉:
Niște HTML
Totul este clar și simplu în structura HTML:
Cadre cheie CSS
Ce sunt cadrele cheie?
În bloc @keyframes există o serie de reguli numite cadre cheie. Cadrele cheie conțin proprietăți care sunt aplicate la un anumit moment în timp în timpul animației. În timpul animației, valorile sunt interpolate („tranziție lină” de la o valoare la alta) și vedem doar o tranziție lină.
Acest lucru poate suna descurajant pentru tine, dar acesta este unul dintre cele mai simple exemple.
Să definim cadrele cheie de început și de sfârșit:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | / * WebKit și Opera * / @ -webkit-keyframes spinner (de la (-webkit-transform: rotateY (0deg);) la (-webkit-transform: rotateY (-360deg);)) / * Toate celelalte browsere * /@keyframes spinner (de la (-moz-transform: rotițiY (0deg); -ms-transform: rotițiY (0grade); transformați: rotițiY (0grade);) în (-moz-transform: rotițiY (-360deg); -ms- transformare: rotireY (-360deg); transformare: rotireY (-360deg);)) |
Pe lângă cadrele cheie, ne interesează și @keyframes spinner, unde indicăm la ce ne vom referi când vom anima mai târziu și anume filator.
Creați scena
Avem nevoie de un element în care animația noastră să câștige volum și să apară un efect de volum. Scena, spre deosebire de imaginea rotativă, este fixată pe pagină.
Pentru scenă, vom folosi proprietatea perspectivei, care este nouă pentru noi, care dă profunzime. Valoarea este dată în pixeli. Determină distanța de la utilizator la elemente în perspectivă. Știu că este greu de înțeles imediat 🙂. Să reducem de la 1200px inainte de 300pxși uită-te la rezultatul de mai jos:
Grozav?!
Și, de asemenea, un videoclip:
Conectarea animației la un element
Veți vedea acum câteva proprietăți noi. Și nici nu vreau să-i forțezi imediat să-și amintească imediat și să înțeleagă semnificațiile. Poți acționa diferit: te uiți doar la ei și ceea ce înțelegi, înțelegi. De fapt, pe măsură ce studiezi lecțiile în continuare, vei întâlni des de ele și vei începe să înțelegi pentru ce sunt ele. Prin urmare, nu vă faceți griji pentru faptul că sunt foarte mulți și nu știți sau înțelegeți ceva!
Și proprietățile sunt următoarele:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | #spinner (lățime: 250px; înălțime: 290px; fundal: url ("http: //www..jpg") fără repetare; text-align: center; culoare: #fff; margine: 0 automat; -webkit-animation -nume: spinner; -funcția-webkit-animație-timing: liniar; -webkit-animație-număr-iterație: infinit; -webkit-animatie-durata: 6s; animatie-nume: spinner; / * indică cadrele cheie ale animației numite „spinner” * / animație-funcție de sincronizare: liniară; / * funcție de sincronizare, care va fi folosită pentru conversii * / animație-iterație-număr: infinit; / * de câte ori se va repeta animația. „infinit” înseamnă infinit * / animatie-durata: 6s; / * durata animației * /-webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; / * indică faptul că aceasta este o transformare 3D * /) #spinner: hover (-webkit-animation-play-state: paused; animation-play-state: paused; / * opri animația * / } |
Am semnat proprietățile fără prefixe, deoarece îndeplinesc funcții similare, doar pentru alte browsere. De asemenea, vreau să observ că oprim animația folosind proprietatea specială animation-play-state atunci când trecem cu mouse-ul peste imagine.
