() translation by (you can also view the original English article)
Ang CodePen ay ang mabilis ng maaasahan para ipakita kung ano
ang aming magagawa sa aming web creations. Narito ang listahan ng ilang magagandang
bagay na ginagawa ng mga tao sa CSS animations kamakailan lamang!
1. JavaScript Mickey Watch
Apple watch katulad ng Mickey watch ni
Jay Savat
(@jaysalvat).
Ito ay magandang halimbawa ng pagsasama ng CSS transitions, SVG graphics at JavaScript para ilagay ang kamay sa mukha ng cute na Mickey Mouse na relo.
2. CSS Submarine
Submarine na may CSS ni Alberto Jerez (@ajerez).
Ang magandang gamit ng pabilog na hugis port-hole na container ay nagbibigay sa CSS-animated submarine ng dating.
3. ASCII AT-AT
AT-AT ni Tim Pietrusky (@TimPietrusky).
Ala-Star Wars AT-AT personnel carrier, na ginuhit gamit ang text na may colours cycled sa CSS. Funky effect. Funky effect.
4. SVG/CSS Loader
Loader SVG/CSS ni Bidji (@Bidji).
Ang loader na ito ay gumagamit ng nagiiba-ibang kulay na nagbibigay ng impresyon na umiikot.
5. 3D CSS Tardis
3D CSS Tardis ni Gerwin van Royen (@Gerwinnz).
Ang CSS ay magagamit para makagawa ng nakakamanghang 3D effects. Narito ang 3D tardis Narito ang 3D tardis:
6. Dozing Bird
Dozing Bird ni Peter Klein (@pmk).
Simpleng istilo ng art at tamang dami ng animation ay nagbibigay sa antok na ibon ng buhay.
7. Pure CSS border animation
Pure CSS border animation na walang SVG ni
Rplus (@rplus).
Simple ngunit napaka-epektibo na gamit ng CSS borders para makagawa ng loading-style animation.
8. Star Wars: The Force Awakens
Star Wars: The Force Awakens in CSS ni Donovan Hutchinson (@donovanh).
Ang pamagat ng dadating na Star Wars na pelikula ginawa gamit ang CSS, HTML at kaunting JavaScript.
9. 3D Synth
Pure CSS 3D Synthesizer (mousedown for
rotation) ni Nikolay Talanov (@suez).
Subukan ito at paikutin itong 3D synth na gawa gamit ang CSS. Nakakamanghang gawa: Nakakamanghang gawa:
10. Cascading Solar System
Cascading Solar System ni Tady Walsh (@tadywankenobi).
Ang modelo ng ating solar system, kumpleto ng bilis ng pag-ikot, mga buwan at detalye ng bawat isa sa mas malaking planeta. Ang araw ay buhay na kuha ng totoong bagay!
11. 3D Solar System
Full CSS 3D Solar System ni Wayne
Dunkley
(@waynedunkley).
Isa pang solar system, subalit ngayon sa 3D. Magandang gamit ng pagkukulay.
12. Flat Design Camera
Flat design camera na may CSS animation ni
Damien Pereira Morberto (@damienpm).
Pindutin ang ang shutter sa flat camera na ito para makita na gumagawa ito ng larawan gamit ang CSS animation.
13. Day and Night Transition
Animoy Araw Gabi ni Szymon Stypa
(@Catagen).
Pindutin ang button para makita ang pagbabago ng umaga sa gabi.
14. Animated Sprite with CSS
Animate sprite na may CSS ni Avaz Bokiev (@samarkandiy).
Ang pagpapakita kung papaano ang pagkakasunud-sunod ng mga imahe (sprite) ay magagamit para makagawa ng stop-motion na animation, kumpleto na may paurong at pasulong na mosyon.
15. Dodecahedron
Dodecahedron ni wontem (@wontem).
Ang magandang dodecahedron na gawa at animated lahat ng CSS.
Pagwawakas
Hindi pa katagalan, aasa tayo sa Flash o JavaScript para sa kahit na anong in-browser animation. Ang modernong browsers ay naghatid ng mas mainam na suporta para sa CSS, na may hardware accelerated 3D at animation.
Salamat sa sites katulad ng CodePen, maaari na nating ibahagi at matuto ng mas mabilis lalo sa ngayon. Ano ang ilan sa mga nakakapagbigay ng inspirasyon na animation demos na nakita mo kamakailan?
