Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS Animation
Webdesign

15 Inspirativnih Primjera CSS Animacija na CodePen

by
Length:LongLanguages:

Croatian (Hrvatski) translation by Maja Petek (you can also view the original English article)

CodePen je u kratkom roku postalo najposjećenije mjesto da prikažemo što sve možemo učiniti sa našim web kreacijama. Evo popisa nekih odličnih stvari koje su ljudi nedavno kreirali sa CSS animacijama!

1. JavaScript Mickey Sat

Apple watch like Mickey watch čiji autor je Jay Salvat (@jaysalvat).

Ovo je zgodan primjer kombiniranja CSS prijelaza, SVG grafika i JavaScript-a za pozicioniranje ruku na Mickey Mouse satu.

2. CSS Submarine

Submarine with CSS čiji autor je Alberto Jerez (@ajerez).

Predivno iskorišten okrugli spremnik u obliku brodskog prozora pruža ovoj CSS animiranoj podmornici ljupki šarm.

3. ASCII AT-AT

AT-AT čiji autor je Tim Pietrusky (@TimPietrusky).

Star Wars-om nadahnut AT-AT sveterenski oklopljeni transport, nacrtan sa tekstom različitih izmjenjujućih boja u CSS-u. Zabavan efekt.

4. SVG/CSS Loader

Loader SVG/CSS čiji autor je Bidji (@Bidji).

Ovaj Loader SVG/CSS koristi izmjenu boja kako bi ostavio dojam rotacije.

5. 3D CSS Tardis

3D CSS Tardis čiji autor je Gerwin van Royen (@Gerwinnz).

CSS se može koristiti za fantastične 3D efekte. Evo 3D tardisa:

6. Dozing Bird

Dozing Bird čiji autor je Peter Klein (@pmk).

Jednostavan umjetnički stil i odgovarajuća količina animacije pruža ovoj pospanoj ptici iluziju života.

7. Pure CSS border animation

Pure CSS border animation bez SVG-a čiji autor je Rplus (@rplus).

Jednostavna, a opet učinkovita upotreba CSS rubova za izradu animacije u stilu učitavanja.

8. Star Wars: The Force Awakens

Star Wars: The Force Awakens u CSS-u čiji je autor Donovan Hutchinson (@donovanh).

Naziv iz Star Wars filma kreiran pomoću CSS-a, HTML-a i malo JavaScript-a.

9. 3D Synth

Pure CSS 3D Synthesizer (za rotaciju povucite miš prema dolje) čiji autor je Nikolay Talanov (@suez).

Isprobajte tipke i rotaciju ovog 3D sintesajzera kreiranog pomoću CSS-a. Odličan rad:

10. Cascading Solar System

Cascading Solar System! čiji autor je Tady Walsh (@tadywankenobi).

Model našeg solarnog sistema, zajedno sa skaliranom brzinom rotacije, mjesecima i detaljima na svakoj većoj planeti. Sunce je čak u stvarnom prikazu!

11. 3D Solar System

Full CSS 3D Solar System čiji autor je Wayne Dunkley (@waynedunkley).

Još jedan solarni sistem, ali ovaj puta u 3D prikazu. Prekrasna upotreba sjenčanja.

12. Flat Design Camera

Flat design camera sa CSS animacijom čiji autor je Damien Pereira Morberto (@damienpm).

Pritisnite okidač na ovom flat fotoaparatu da vidite kako stvara fotografiju koristeći CSS animaciju.

13. Day and Night Transition

Day Night simulacija čiji autor je Szymon Stypa (@Catagen).

Pritisnite gumb da vidite kako se dan pretvara u noć.

14. Animated Sprite with CSS

Animate sprite with CSS čiji autor je Avaz Bokiev (@samarkandiy).

Primjer kako se sekvenca slike može upotrijebiti za izradu 'stop-motion' animacije, upotpunjenom sa pokretom prema naprijed i nazad.

15. Dodecahedron

Dodecahedron čiji autor je wontem (@wontem).

Suptilan, prekrasan dodekaedar u potpunosti kreiran i animiran sa CSS-om.

Zaključak

Ne tako davno, oslonili bi se na Flash i JavaScript alate za bilo koju animaciju za pretraživače. Moderni pretraživači donijeli su bolju podršku za CSS, sa hardverski ubrzanim 3D i animacijom.

Zahvaljujući stranicama kao što je CodePen, možemo lako podijeliti i naučiti više nego ikada prije. Koji su najinspirativnije demo animacije koje ste u posljednje vrijeme vidjeli?

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.