Přechody CSS: popis, funkce a funkce využití

Vytvoření dobrého webu dnes jednoduše: existuje dostatek odborníků, aktivně se řídí aktivní procesy zlepšování funkčnosti a jeho prezentace (struktura a obsah). Posledním z nich je design CSS - nejjednodušší, nákladově efektivní a efektivní řešení.

Boj mezi vývojáři pro zákazníka a vlastníky stránek pro zájem návštěvníků a návštěvnost zdrojů se přesunul do oblasti jemné reklamy a měkkého (teplého a dynamického) obsahu.

Přechody CSS

Podle současného stanoviska přechody CSS v pseudo-třídě: vznášení a zpět. K dispozici je styl štítku, například TagStyle, a tam je štítek TagStyle: hover. Úkolem pseudo-třídy je dát obsah všech pravidel druhého popisu do prvního okamžiku, jakmile je myš nad ním, a jakmile to půjde, otočte všechno zpět. V tomto schématu (v klasické verzi) se obvykle mění barva pozadí, barva textu, rámeček, zaokrouhlování, vruby a další viditelné prvky. Použití pravidla přechodů CSS umožňuje plynulé a plynulé řízení.

Pravidlo může měnit mnoho dalších prvků, ale obvykle se používají specifikované. Úplný seznam pravidel, která jsou ovlivněna vlastností Transition CSS, naleznete na oficiálních zdrojích na Internetu.

Obsah přechodového pravidla

Úloha pravidla: hladce převádět další pravidla z jednoho státu do druhého, takže CSS Transitions zahrnuje (transition = '*):
  • název vlastnosti, majetek);
  • doba trvání procesu (* -duktura);
  • funkce přechodu (* -timing-function);
  • zpoždění počátku procesu (* -delay).
  • Podle kanonů CSS je povolen krátký vstup pravidla:
  • transition: all 1 s ease .5 s;
  • Přechod platí pro všechna pravidla, provedená za jednu vteřinu ve stylu "snadnosti" se zpožděním o půl sekundy. Totéž, napsané prvky pravidla:
  • * -projekt: vše;
  • * -duktura: 1 s;
  • * -timing-funkce: snadnost;
  • * -delení: .5s;
  • Pravidlo přechodu je podporováno hlavními prohlížeči, ale nikdy s tím nedochází k narušení a existují křížové prohlížeče písemných pravidel.

    Klasická aplikace

    Nejjednodušší a nejčastěji používaný přechod je barva pozadí (symbol): CSS Přechod: pozadí:
    V tomto příkladu platí pouze pravidlo pro barvu pozadí pravidlo přechodu (trvání 2 sekundy, funkce easy-out, zpoždění 0,2 sekundy) a ostatní pravidla se okamžitě přesunou do jiného stavu.

    Funkce přechodu (styl)

    Důležitou součástí pravidel CSS je přechodová funkce, tj. Časová křivka pro přechod z jednoho státu do druhého. Hladká (snadná) je výchozí hodnota: přechod začíná pomalu, urychluje a zpomaluje na konci.
    Hodnota "lineární" definuje jednotný přechod: "easy-in" - pomalu spouští přechod, poté hladce zrychluje na konec a "easy-out" - pracuje naopak. Funkce cubic-bezier (x1 y1 x2 y2) umožňuje vytvořit vlastní přechodovou volbu, ale pomocí oficiálních zdrojů a stránek, které mají dobré zkušenosti s Bezierovou křivkou, je stále lepší. Něco nového se rozhodně nevyjde, ale zkušenost s příjemnou volbou oční a návštěvnické psychologienahromaděný je stále značný.

    Kombinace přechodu s transformací

    Dobrý efekt je dán kombinací pravidel CSS Transition & Transformovat První určuje čas procesu, druhý ukazuje, že je třeba dělat celou tuto dobu. Konvert umožňuje přesunout značky, otáčet, změnit velikost, změnit pozici. Uvažujme kombinaci:
  • transformace: otočení (180 deg);
  • přechod: vše 2 s easy-out .2 s;
  • Během dvou sekund bude obsah značky otočen o 180 stupňů. Experimentovat s funkcemi překládání, měřítka, otáčení, zkosení a jejich variací, můžete dosáhnout zajímavých efektů a dát práci jedinečnou originalitu.
    CSS3 také umožňuje provést 3D transformaci, tj. Přesunout značku v souřadnicích xyz, což ve spojení s přechody CSS umožňuje otáčet text a obrázek podle potřeby k dosažení cíle.

    Slučitelnost s pravidly přechodu

    Pokud budeme používat CSS přechody na pozadí, hranice, barvy a jiných zřejmých vizuálních pravidel normálně, přirozeně a snadno, v některých případech, například pokusy spojit CSS přechod & amp; Displej, můžete prostě trávit čas a dosáhnout požadované.
    Obecně řečeno, při plánování použití vizuálních efektů se doporučuje přidělit "viditelné z univerzální". Proveďte dobrou rotaci tvaru textu nebo po určitou dobu - akci, která je malá vzhledem k tomu, co dává zobrazení vlastností, viditelnost, z-index. Nicméně pokud jsou dva z nich jasně specifikovány v seznamu pravidel, ke kterým se vztahuje CSS Transition, pak první není uvedeno, i když jeho použití přináší něco do značky, která je viditelná, ale špatně spravovaná.


    Pravidlo přechodu není pouze: pohybovat se vzad a zpět, lze ho úspěšně aplikovat na jiné pseudo-třídy, například: zaostření nebo: aktivní. Transformace a transformace jsou obecně ty funkce CSS, které nemají přímou souvislost s logikou věcí (totéž však jde o styly, ne o algoritmy). Ale v posledních několika letech se důraz posunul tak, že nepoužívat bohatý arzenál CSS a CSS3 je prostě nepřijatelným luxusem.

    Na abnormální a přírodní

    V raných dobách osobních počítačů, kdy matematické výpočty vyrobené matematický procesor nebyl normální mít 386 počítač bez matematický koprocesor, pokud šlo o efektivní využití Fortran-programu pro výpočet cestu Měsíc Je samozřejmé, že dnes nikdo nepřichází do úvahy, kupuje si počítač a ptá se, zda má matematické výpočty implementované hardwarově.
    Koncepty stylů nepochybně mají velmi malou souvislost s algoritmem pro výpočet přechodového času z jednoho stylu do druhého nebo o otočení značky kolem jiné značky. Značka není elektron, který se otáčí v blízkosti atomu.
    A CSS - podle definice tabulka kaskádových stylů a momenty dědictví, s přihlédnutím k mobilním zařízením, s prioritami, kombinacemi. Ale svět se mění tak rychle. Dnes matematický vzorec a jiný nebude jmenovat, protože koncept čísla v moderním programovacím jazykem se příliš neliší od konceptu linie. Ale pokud to všechno vyhovuje, je-li to pohodlné a efektivní, může mít smysl změnit vlastní nápady. Možná je to CSS Transition & amp;Transformuje takovou malou revoluci: nemusíte programovat to, co nepotřebujete dávno. Programátoři již dlouho trpí onemocněním profese, což je jiné: přepsat nejen to, co udělali ostatním v rámci dalšího úkolu, ale i to, co včera sami udělali. Co dělat, svět a technologie se mění a dokonce i malé metamorfózy v oboru někdy vedou k potřebě významných změn kódu. Taková transformace matematických algoritmů v krásných a pohodlných pravidlech CSS je však velmi praktická a efektivní.

    Související publikace