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

15 inspirujących przykładów animacji CSS na CodePen

by
Length:LongLanguages:

Polish (Polski) translation by Mateusz Kurlit (you can also view the original English article)

CodePen szybko staje się miejscem przeznaczonym do prezentowania naszych kreatywnych projektów internetowych. Oto lista kilkunastu świetnych przykładów animacji CSS, które ostatnio zostały stworzone!

1. Zegarek Myszki Miki w JavaScript

Zegarek Myszki Miki w JavaScript od Jaya Salvata (@jaysalvat).

Piękny przykład łączący przejścia CSS, grafiki SVG oraz JavaScript w celu ułożenia rąk na tarczy zegarka z uroczą Myszką Miki.

2. Łódź podwodna w CSS

Łódź podwodna w CSS od Alberta Jereza (@ajerez).

Wspaniałe wykorzystanie okrągłego kontenera w kształcie otworu nadaje tej animowanej łodzi podwodnej wiele uroku.

3. ASCII AT-AT

AT-AT od Tima Pietrusky'iego (@TimPietrusky).

Inspirowany Gwiezdnymi Wojnami transporter AT-AT, narysowany za pomocą kolorowych cykli w CSS. Wystrzałowy efekt.

4. Ikona ładowania SVG/CSS

Ikona ładowania SVG/CSS od Bidji (@Bidji).

Ikona ładowania wykorzystuje zmieniające się kolory dając wrażenie animacji obracania.

5. Tardis w 3D CSS

Tardis w 3D CSS od Gerwina van Royena (@Gerwinnz).

CSS może być wykorzystany do tworzenia niesamowitych trójwymiarowych efektów. Oto Tardis w 3D:

6. Senny ptaszek

Senny ptaszek od Petera Kleina (@pmk).

Prosty styl artystyczny i odpowiednia ilość animacji tchnęły życie w tego sennego ptaszka.

7. Animacja ramki w CSS

Animacja ramki w CSS bez SVG od Rplus (@rplus)

Proste, a jednocześnie efektywne wykorzystanie ramek CSS do stworzenia animacji wczytywania.

8. Gwiezdne Wojny: Przebudzenie Mocy

Gwiezdne Wojny: Przebudzenie Mocy w CSS od Donovana Hutchinsona (@donovanh).

Tytuł nadchodzącego filmu Gwiezdne Wojny stworzony za pomocą CSS, HTML i nieco JavaScript.

9. Syntezator w 3D

Syntezator w 3D CSS (obracanie za pomocą myszki) od Nikolaya Talanova (@suez)

Wciskaj klawisze i obracaj syntezator w 3D, który został stworzony za pomocą CSS. Wspaniała praca:

10. Kaskadowy Układ Słoneczny

Kaskadowy Układ Słoneczny! od Tady'iego Walsha (@tadywankenobi).

Kompletny model naszego Układu Słonecznego z opcją zmiany prędkości obrotowej, księżycami i szczegółami na każdej większej planecie. Słońce jest nawet prawdziwym obrazem obiektu!

11. Układ Słoneczny w 3D

Pełny Układ Słoneczny w 3D CSS od Wayne'a Dunkleya (@waynedunkley).

Kolejny układ słoneczny, ale tym razem w 3D. Piękne wykorzystanie cieniowania.

12. Płaski wygląd aparatu

Płaski wygląd aparatu z animacją CSS od Damiena Pereiry Moberto (@damienpm).

Naciśnij spust migawki tego płaskiego aparatu, aby wykonać zdjęcie wykorzystując animację CSS.

13. Symulacja dnia i nocy

Symulacja dnia i nocy od Szymona Stypy (@Catagen).

Przełącz przycisk, aby zobaczyć jak dzień przechodzi w noc.

14. Animowana postać w CSS

Animowana postać w CSS od Avaza Bokieva (@samarkandiy).

Oto jak sekwencja obrazów (sprite) może być wykorzystana do stworzenia animacji poklatkowej, włącznie z ruchem w przód i w tył.

15. Dwunastościan

Dwunastościan od wontem (@wontem).

Subtelny i piękny dwunastościan w pełni stworzony i animowany za pomocą CSS.

Podsumowanie

Nie tak dawno temu, każda animacja w przeglądarce opierała się na technologii Flash i JavaScript. Nowoczesne przeglądarki wprowadziły lepsze wsparcie dla CSS wykorzystując akcelerację sprzętową dla 3D i animacji.

Dzięki stronom takim jak CodePen, możemy łatwiej niż kiedykolwiek wcześniej dzielić się wiedzą i uczyć od innych. Jakie najbardziej inspirujące animacje widziałeś ostatnio?

Advertisement
Advertisement
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.