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?
