Prehodi CSS: opis, funkcije in funkcije uporabe

Ustvarite dobro spletno stran danes preprosto: dovolj strokovnjakov, aktivni procesi izboljšanja funkcionalnosti in njegove predstavitve (struktura in vsebina) se aktivno spremljajo. Slednje je CSS design - kot najbolj preprosta, stroškovno učinkovita in učinkovita rešitev.

Boj med razvijalci za stranko in lastniki mest za zanimanje obiskovalcev in prisotnost virov se je preselil na področje finega oglaševanja in mehke (tople in dinamične) vsebine.

Prehodi CSS

V skladu s trenutnim mnenjem, CSS Prehodi v psevdo-razredu: hover in back. Obstaja oznaka slog, na primer TagStyle, in je slog TagStyle: hover. Naloga psevdoklasa je, da vsebino vseh pravil drugega opisa postavi v prvo takoj, ko je miška nad njo, in takoj, ko gre, zavije vse nazaj. V tej shemi (v klasični različici) se običajno spremeni barva ozadja, barva besedila, okvir, zaokroževanje, vdolbine in drugi vidni elementi. Uporaba pravila CSS Transitions omogoča gladko in gladko delovanje.

Pravilo lahko spremeni številne druge elemente, običajno pa se uporabljajo določeni. Popoln seznam pravil, na katera vpliva lastnost prehoda CSS, lahko najdete na uradnih virih na internetu.

Vsebina prehodnega pravila

Naloga pravila: za nemoteno prenašanje drugih pravil iz ene države v drugo, tako da CSS Transition s vključuje (transition = '*'):
  • ime lastnosti, na katero vpliva (*) premoženje);
  • trajanje postopka (* - trajanje);
  • prehodna funkcija (* -timing-funkcija);
  • zakasnitev začetka procesa (* -odlaganje).
  • Pod vpisom CSS lahko dovolite kratek vnos pravil:
  • prehod: vse 1 s enostavno .5 s;
  • Prehod velja za vsa pravila, ki se izvedejo v eni sekundi v stilu »lahkotnosti« z zamikom pol sekunde. Enako, napisano z elementi pravila:
  • * -pravica: vse;
  • * - trajanje: 1 s;
  • * - funkcija za merjenje časa: enostavnost;
  • * - odlog: .5s; Pravilo o prehodu podpirajo glavni brskalniki, vendar to nikoli ne posega v to in obstaja navzkrižno brskanje po pisnih pravilih.

    Klasična uporaba

    Najlažji in najpogosteje uporabljen prehod je barva ozadja (simbol) ozadja: prehod CSS: ozadje:
    V tem primeru bo pravilo o barvi ozadja uporabilo pravilo prehoda (trajanje 2 sekund, izklop funkcije, zamik 0,2 sekunde) in druga pravila se bodo takoj preselila v drugo stanje.

    Prehodna funkcija (slog)

    Pomembna sestavina pravil CSS je prehodna funkcija, to je časovna krivulja za izvedbo prehoda iz enega stanja v drugo. Smooth (easy) je privzeta vrednost: prehod se začne počasi, pospeši in upočasni na koncu.
    Vrednost „linearno“ opredeljuje enoten prehod: „enostavnost“ - začne prehod počasi, nato pa gladko pospeši do konca in „olajša“ - deluje obratno. Funkcija kubični-bezier (x1 y1 x2 y2) vam omogoča, da ustvarite lastno prehodno možnost, vendar je uporaba uradnih virov in strani, ki imajo dobre izkušnje z Bezijevo krivuljo, še boljša. Nekaj ​​novega zagotovo ne bo prišlo ven, ampak doživetje prijetnega očesa in možnosti psihologije obiskovalcanakopičena je še vedno precejšnja.

    Kombinacija prehoda s preoblikovanjem

    Dober učinek je podan s kombinacijo pravil CSS Transition & amp; Transform Prvi določa čas procesa, drugi pa kaže, da je treba storiti ves ta čas. Convert vam omogoča premikanje oznak, vrtenje, spreminjanje velikosti, spreminjanje položaja. Poglejmo kombinacijo:
  • transformacija: vrtenje (180 stopinj);
  • prehod: vsi 2 sekundi poenostavljeni .2 s;
  • V dveh sekundah bo vsebina oznake 180 stopinj. Eksperimentiranje s funkcijami translate, scale, rotate, skew in njihovih variacij, lahko dosežete zanimive učinke in dajejo svojemu delu edinstveno izvirnost.
    CSS3 omogoča tudi izvedbo 3d transformacije, to je, da premaknete oznako v koordinate xyz, kar v povezavi s CSS Transitions omogoča vrtenje besedila in slike, kot je potrebno za dosego cilja.

    Združljivost s prehodnim pravilom

    Če je uporaba prehodov CSS za ozadje, obrobo, barvo in druga očitno vizualna pravila normalna, naravna in primerna, potem v nekaterih primerih, na primer, poskuša združiti prehod CSS & amp; Prikaz, lahko preprosto preživite čas in ne dosežete želenega.
    Na splošno je pri načrtovanju uporabe vizualnih učinkov priporočljivo, da se dodeli "viden iz vsestranskega". Naredite dobro rotacijo oblike besedila ali za določen čas - dejanje, ki je majhno glede na to, kar daje prikaz lastnosti, vidljivost, z-indeks. Če pa sta zadnji dve jasno določeni na seznamu pravil, na katere se nanaša CSS Transition, potem prvi ne omenja, čeprav njegova uporaba prinaša nekaj v oznako, ki je opazna, vendar slabo upravljana.


    Prehodno pravilo ni le: hover in back, lahko se uspešno uporabi za druge psevdo-razrede, na primer: focus ali: active. Na splošno so Transition in Transform tiste CSS funkcije, ki nimajo neposredne povezave z logiko stvari (vseeno gre za sloge, ne za algoritme). Toda v zadnjih nekaj letih se je poudarek premaknil, tako da je neuporaba bogatega arzenala CSS in CSS3 preprosto nesprejemljiva razkošje.

    O nenormalnem in naravnem

    Ob zori osebnih računalnikov, ko je bil matematični procesor izdan za matematične izračune, je bilo nenormalno imeti 386. računalnik brez matematičnega soprocesorja, ko je šlo za učinkovito uporabo Fortranovega programa za izračun poti Luna Seveda, danes nihče ne pride na glavo, kupi računalnik in sprašuje, ali ima na voljo strojno opremo za matematične izračune.
    Nedvomno imajo koncepti stilov zelo majhen odnos do algoritma za izračun prehodnega časa iz enega sloga v drugega ali obračanja oznake okoli druge oznake. 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, matematike, ne boste imenovali druge formule, ker pojem števila v sodobnem programskem jeziku ni veliko drugačen od koncepta linije. Ampak, če vse to ustreza, če je priročno in učinkovito, potem je morda smiselno, da spremenite svoje ideje. Morda je to CSS Transition & amp;Transformacija bo naredila tako majhno revolucijo: ni vam treba programirati tega, kar ne potrebujete dolgo časa nazaj. Programerji že dolgo trpijo zaradi bolezni stroke, ki je drugačna: preoblikovati ne le tisto, kar so naredili drugim pri naslednji nalogi, ampak tudi to, kar so sami storili včeraj. Kaj storiti, svet in tehnologija se spreminjajo, in celo majhne metamorfoze na tem področju včasih vodijo do pomembnih sprememb kodeksa. Vendar pa je taka transformacija matematičnih algoritmov v lepih in priročnih pravilih CSS zelo praktična in učinkovita.

    Sorodne publikacije