15 Inspirativních příkladů animace CSS na CodePen
Czech (Čeština) translation by Karel Krkoska (you can also view the original English article)
CodePen se rychle stává místem, kde můžete ukázat, co můžeme dělat s našimi webovými výtvory. Zde je seznam některých skvělých věcí, které lidé nedávno vytvářeli s animacemi CSS!
1. JavaScript Mickey Watch
Apple watch like Mickey watch od Jay Salvat (@jaysalvat).
Jedná se o krásný příklad kombinace přechodů CSS, grafiky SVG a JavaScriptu pro umístění rukou na roztomilý ciferník Mickey Mouse.
2. CSS Submarine
Submarine with CSS od Alberto Jerez (@ajerez).
Nádherné využití kruhového tvaru kontejneru v podobě portu dává této CSS animované ponorce spoustu kouzla.
3. ASCII AT-AT
AT-AT od Tim Pietrusky (@TimPietrusky).
Hvězdnými válkami inspirovaný AT-AT, kreslený textem s barvami cyklickými v CSS. Funky efekt.
4. SVG/CSS Loader
Loader SVG/CSS od Bidji (@Bidji).
Tento loader používá měnící se barvy, aby vyvolal dojem otáčení.
5. 3D CSS Tardis
3D CSS Tardis od Gerwin van Royen (@Gerwinnz).
CSS lze použít k vytvoření úžasných 3D efektů. Zde je 3D tardis:
6. Dozing Bird
Dozing Bird od Peter Klein (@pmk).
Jednoduchý umělecký styl a jen správné množství animace dávají tomuto ospalému ptákovi iluzi života.
7. Pure CSS border animation
Pure CSS border animation without SVG od Rplus (@rplus).
Jednoduché, ale velmi účinné využití hranic CSS k vytvoření animace ve stylu načítání.
8. Star Wars: The Force Awakens
Star Wars: The Force Awakens v CSS od Donovan Hutchinson (@donovanh).
Titul z nadcházejícího filmu Star Wars vytvořený pomocí CSS, HTML a trochu JavaScriptu.
9. 3D Synth
Pure CSS 3D Synthesizer (mousedown for rotation) od Nikolay Talanov (@suez).
Vyzkoušejte klávesy a otočte tento 3D syntezátor vytvořený pomocí CSS. Skvělá práce:
10. Cascading Solar System
Cascading Solar System! od Tady Walsh (@tadywankenobi).
Model naší sluneční soustavy, doplněný měřítkem rychlosti otáčení, měsíci a detaily na každé z větších planet. Slunce je dokonce živé zachycení skutečné věci!
11. 3D Solar System
Full CSS 3D Solar System od Wayne Dunkley (@waynedunkley).
Další solární systém, ale tentokrát ve 3D. Krásne využití stínování.
12. Flat Design Camera
Flat design camera with CSS animation od Damien Pereira Morberto (@damienpm).
Stiskněte spoušť na této ploché kameře a uvidíte, že vytvoříte fotografii pomocí animace CSS.
13. Day and Night Transition
Day Night simulation od Szymon Stypa (@Catagen).
Stiskněte tlačítko pro přeměnu dne na noc.
14. Animated Sprite with CSS
Animate sprite with CSS od Avaz Bokiev (@samarkandiy).
Ukázka toho, jak může být sekvence obrazů (sprite) použita k vytvoření stop-motion animace, kompletní s pohybem vpřed a vzad.
15. Dodecahedron
Dodecahedron od wontem (@wontem).
Nádherný, krásný dodekedron vytvořený a animovaný zcela s CSS.
Závěr
Ne tak dávno bychom se naklonili na nástroje Flash nebo JavaScript pro animaci v prohlížeči. Moderní prohlížeče přinesly lepší podporu pro CSS, s hardwarově zrychleným 3D a animací.
Díky stránkým, jako je CodePen, můžeme sdílet a učit se jednodušeji než kdykoli předtím. Co jsou některé z nejvíce inspirativních animací, které jste viděli nedávno?