Prehodi CSS: opis, lastnosti in značilnosti uporabe

Ustvarjanje dobre spletne strani je danes preprosto: dovolj strokovnjakov, procesi izboljševanja funkcionalnosti in predstavitve (struktura in vsebina) se aktivno odvijajo. Slednje je oblikovanje sredstev CSS - kot najbolj preprosta, stroškovno učinkovita in učinkovita rešitev.

Boj med razvijalci za stranko in lastnike mest za zanimanje obiskovalcev in udeležbo virov se je preselil na področje tankega oglaševanja in mehke (tople in dinamične) vsebine.

CSS Jump Place

в псевдокласе :hover и обратно. Glede na sedanje mnenje je kraj CSS Transitions v psevdo-razredu: hover in back. Obstaja oznaka slog, na primer TagStyle, in obstaja slog TagStyle: hover. Naloga psevdoklasa je, da vsebino vseh pravil drugega opisa postavi v prvo, takoj ko je miška nad oznako, in takoj, ko jo zapusti, vrne vse nazaj.

V taki shemi (v klasični različici) se običajno spremenijo barve ozadja, barve besedila, okvir, njegove ukrivljenosti, zamiki in drugi vidni elementi. позволяет это сделать плавно и управлять плавностью. Uporaba pravila CSS Transitions vam omogoča, da to storite gladko in nadzirate gladkost.

Pravilo lahko spremeni mnoge druge elemente, vendar se običajno uporabljajo označeni elementi. CSS, можно найти на официальных ресурсах в интернете. Popoln seznam pravil, na katera vpliva lastnost prehoda CSS, lahko najdete na uradnih virih na internetu.

Vsebina prehodnega pravila

s включает в себя (transition='*'): Naloga pravila: izvedite nemoten prehod drugih pravil iz enega stanja v drugega, zato CSS Transition s vključuje (transition = '*'):

• ime nepremičnine, ki je prizadeta (* -pravica);
• trajanje procesa (* - trajanje);
• prehodna funkcija (* -timing-funkcija);
• zakasnitev zaženite proces (* -odlaganje).

Dovoljeno je napisati kratko pravilo o kanonu CSS:

• 1 s ease .5 s ; prehod: vse 1 sekunde .5 s ;

Prehod velja za vsa pravila, ki se izvedejo v eni sekundi v "enostavnem" slogu s pol sekundnim zamikom. Enako, napisano z elementi pravil:

• * - lastnina: vse;
• * - trajanje: 1 s;
• - funkcija za merjenje časa: enostavnost;
• * -odlaganje: .5s;

поддерживается основными браузерами, но никогда не помешает убедиться в этом и в наличии кроссбраузерности записанных правил. Pravilo o prehodu podpirajo glavni brskalniki, vendar nikoli ne boli, da se prepričate o tem in o združljivosti pisnih pravil med brskalniki.

Klasična aplikacija

: background: Najenostavnejši in najpogosteje uporabljen je prehod barve ozadja (simbola): CSS Transition : ozadje:

V tem primeru bo za pravilo barve ozadja uporabljeno samo pravilo prehoda (trajanje 2 sekundi, funkcija enostavnosti, zakasnitev 0,2 sekunde), druga pravila pa bodo takoj prešla v drugo stanje.

Prehodna funkcija (slog)

- функция перехода, то есть кривая времени, как выполнять переход из одного состояния в другое. Pomemben del pravila CSS Transitions je prehodna funkcija, to je časovna krivulja, kako narediti prehod iz enega stanja v drugo. Gladka možnost (easy) je privzeta: prehod se začne počasi, pospeši in upočasni na koncu.

Vrednost 'linearnega' določa enoten prehod: 'enostavnost' - začne prehod počasi, nato pa se postopoma pospeši do konca in 'sprostitev' - deluje obratno.

Kubična-bezierjeva funkcija (x1, y1, x2, y2) vam omogoča, da ustvarite lastno prehodno možnost, vendar je uporaba uradnih virov in strani z dobrimi izkušnjami z uporabo Bezierjeve krivulje še vedno bolj zaželena. Nekaj ​​novega, ki bi ga bilo mogoče najti, zagotovo ne bo delovalo, toda izkušnje prijetnega pogleda in psihologije obiskovalca možnosti so se kljub temu kopičile.

Konverzija je mešana s konverzijo

& Transform. Kombinacija pravil CSS Transition & Transform daje dober učinek. Prvi določa čas postopka, drugi kaže, kaj naj počnem ves ta čas.

Transformacije vam omogočajo premikanje oznak, njihovo obračanje, spreminjanje velikosti, spreminjanje položaja. Upoštevajte kombinacijo:

• ( 180 deg ); transformacija: vrtenje ( 180 stopinj );
  • 2 s ease-out .2 s ; prehod: vse 2 sekunde .2 s ;

Za dve sekundi bo vsebina oznake obrnila za 180 stopinj. Eksperimentiranje s funkcijami prevajanja, merjenja, vrtenja, poševnosti in njihovih variacij, lahko dosežete zanimive učinke in svojemu delu podarite izvirno izvirnost.

позволяет вращать тексты и фигуры, как это необходимо для достижения поставленной цели. CSS3 vam omogoča tudi preoblikovanje 3d, to je, da premaknete oznako v koordinate xyz, kar vam v kombinaciji s prehodi CSS omogoča vrtenje besedil in oblik, kot je potrebno za dosego cilja.

Združljivo s prehodnim pravilom

для background, border, color и других очевидно визуальных правил нормально, естественно и удобно, то для некоторых случаев, например, попытки совместить CSS Transition & Display, можно просто потратить время и не достичь желаемого. Če je uporaba prehodov CSS za ozadje, obrobo, barvo in druga očitno vizualna pravila normalna, naravna in priročna, potem lahko v nekaterih primerih, na primer, poskušate združiti CSS Transition & Display, lahko preprosto porabite čas in ne dosežete, kar želite.

Na splošno je pri načrtovanju uporabe vizualnih učinkov priporočljivo razlikovati "vidno od postavitve". Če želite narediti lepo rotacijo oblike ali besedila za določen čas, je dejanje, ki ima malo skupnega z lastnostmi prikaza, vidljivosti, z-indeksa. , то первое не упоминается, хотя его использование привносит в тег что-то заметное, но слабо управляемое. Če pa sta slednji jasno zapisani na seznamu pravil, s katerimi je povezan prehod CSS, se prvi ne omenja, čeprav njegova uporaba uvaja oznako, ki je opazna, vendar slabo nadzorovana.

Prehodno pravilo ni samo: hover in obratno, lahko ga uspešno uporabimo tudi pri drugih psevdo-razredih, na primer: focus ali: active.

Na splošno so Transition in Transform funkcije CSS, ki logično niso neposredno povezane z njim (gre le za sloge, ne za algoritme). Toda v zadnjih nekaj letih so se poudarki premaknili toliko, da ne uporabljate bogatega arzenala CSS in CSS3, je preprosto nepopustljiv luksuz.

O nenormalnem in naravnem

Ob zori osebnih računalnikov, ko je bil izdelan matematični procesor za matematične izračune, je bilo nenormalno imeti 386. računalnik brez matematičnega koprocesorja, ko je prišlo do učinkovite uporabe programa Fortran za izračun poti do lune. Seveda danes ne pride do tega, da bi kdorkoli, ki kupuje računalnik, vprašal, ali ima na voljo strojno opremo za matematične izračune.

Brez dvoma je algoritem za izračun časa prehoda iz enega sloga v drugega ali rotacije oznake okoli druge oznake zelo majhen odnos do idej o stilih. Oznaka ni elektron, ki se vrti v bližini atoma.

In CSS - po definiciji, tabela kaskadnih stilov, in z trenutki dedovanja, ob upoštevanju mobilnih naprav, s prednostnimi nalogami, kombinacijami.

Toda svet se tako hitro spreminja. Danes ne morete imenovati drugačne formule matematike, ker koncept številke v sodobnem programskem jeziku ni veliko drugačen od koncepta niza.

Toda, če je to primerno za vse, če je primerno in učinkovito, potem je morda smiselno spremeniti svoje ideje. & Transform сделают такую маленькую революцию: не нужно программировать то, что уже давно не нуждается в этом. Očitno je, da bo CSS Transition & Transform naredil tako majhno revolucijo: ni potrebe, da programirate nekaj, kar tega ne potrebuje več. Programerji že dolgo trpijo zaradi bolezni stroke, ki se razlikuje po sledečem: ponovno napisati ne le tisto, kar so drugi storili pred njimi za naslednjo nalogo, ampak tudi to, kar so sami storili včeraj. Kaj storiti, svet in tehnologije so spremenljive, in celo majhne metamorfoze na področju uporabe včasih vodijo do potrebe po pomembnih spremembah kode.

Kljub temu je tako preoblikovanje matematičnih algoritmov v lepa in priročna pravila CSS zelo praktično in učinkovito.