30 Cool CSS animací, které musíte vidět
Již dříve jsme publikovali efekty kreativního textu, které můžete vytvořit pomocí CSS, a mnoho dalších skvělých věcí, které jste si neměli myslet, že by bylo možné provést pomocí CSS. Tato kompilace se však zaměřuje na mnoho věcí, které můžete animovat pomocí CSS, a mnoho z těchto výtvorů vám umožní zvednout obočí nebo dva.
Od načítání animací po přepínání a modálních oken k třepajícím se prvkům, tato hromada 30 neobvyklé a kreativní využití CSS animace můžete otevřít svou mysl na více způsobů, jak můžete hrát s CSS animacemi, o kterých jste si nikdy předtím neuvažovali.
CSS Loading Animace Od patrikhjelm
Sedm animovaných teček se posouvá doleva a doprava, aby znamenalo nabíjecí akci.
Animovaný nákupní košík ikona jonitrythall
Roztomilé animované efekty, kdy se potraviny přidávají do nákupního košíku. Projděte dolů.
Hamburger CSS3 pouze animace Dawida Krajewského
Postaven s čistým CSS, bez JS nebo cokoliv jiného.
404 animovaná postava s es
Aspoň s touto chybovou stránkou na ní vývojář pracuje. I když je to 404.
CSS Mars přistání pomocí mgitch
Přistáli jsme na Marsu! Vyrobeno s CSS.
Avenger Mariosmaselli
Slyšíte, jak se na obrazovce objevuje hněv? Cool, správně?
Přepínání den / noc Podle jsndks
Nyní můžete přepínat den a noc pomocí CSS. Myšlenka!
Google Now Aplikace pro třetí strany podle kódu
Google Nyní aplikace třetích stran, animované.
Clo clo By judag
Takhle se pohybuje kohout? Vsadíte se, že to dělá, spolu s krkem. Skvělá praxe CSS3.
Menu ikony animace od mariusbalaj
Jednoduchý nápad k akci; sledujte, jak se tlačítko menu zhmotňuje při posouvání dolů.
Další CSS preloader Maseone
Úžasná animace CSS rytmu. Hypnotické, ne?
Odeslat tlačítko pomocí auginator
Klepnutím odešlete a tlačítko animuje proces načítání, dokud není odeslání dokončeno!
Elastic SVG Sidebar Materiál Design by suez
Přetažením bílého pruhu doprava zobrazíte elastický efekt bočního panelu.
Tlačítko Částice igcorreia
Udělejte to, co říká tlačítko: vzhůru pro úžas.
Gooey tlačítko Lucas Bebber
Klikněte pro efekt Gooey. Dostanete to, jakmile ho uvidíte, a budete na něj několikrát kliknout. Amirite?
Tlačítko Flipside By hakimel
Klikněte na libovolnou stranu tlačítka Delete a tlačítko se otočí podle toho, kde kliknete.
Pravé menu hamburger! CharlesSmart
Opravdu chutné hamburgerové menu. Klikněte na hamburger pro efekty
Cruisin 'yy
Podívejte se na motorku.
3D vlny krychle Waddington
Svaté 3D kostky!
Podpis animace Od drygiel
Tady je podpis, který není ve skutečnosti GIF animací, ale místo toho PNG sekvence animovaná s CSS3.
Pozadí přechodu animace By quasimondo
Tento trik mění gradient pozadí z jedné barvy na druhou v hladkém, souvislém tvaru.
Star wars toggle icon Podle rss
Menu hamburger se promění v lightsabers v bitvě (kříž).
Animace stylu GIFu Jascha
Sledujte, jak se fotografie ztvárňuje uprostřed pixelového umění.
Vstupní animace zaostřování / oddálení
Malé animované pero animované píše na vrcholu forom, který vyplňujete.
Chromatický trojúhelníkBy felipedefarias
Úžasná optická iluze, ano, hotová s CSS3.
Kávovar Tímto zařízením
Zde je připomínka vzít si denní dávku kávy. Stejně jako potřebujete.
Chrome Dinosaur By nickspiel
Nelze se dostat na stránku, kterou chcete zrušit? Tady je dinosaurus, kterého vždy uvidíte, když se to stane, jen tentokrát běží z meteoritu!
CSS otřásá Elrumordelaluz
Hover přes každý efekt sledovat malý chlap třást.
Newtonova kolébka Loader Všechny věci Smitty
Pokud znáte fyziku, určitě znáte Newtonovu kolébku, ale asi ne takhle.
Spusťte Modal By koolhaus
Kliknutím zobrazíte pěknou a hladkou animaci okna.
Pěší robot Robot P233
Tento robot jen chodí, chodí a chodí kolem osy Y..
Ohýbání Pagination Arrows Hakim
Tato animace stránkování z první stránky na poslední jasně ukazuje, jak se vám daří, po stranách.
Nyní si přečtěte: 15 Krásné textové efekty vytvořené pomocí CSS
