38 Inspirujące demonstracje animacji CSS3

Od czasu wprowadzenia CSS3 istnieje naprawdę wiele gorących debat związanych z jego możliwościami i użytecznością. Istnieje jednak wiele ciekawych eksperymentów wykonanych ręcznie, aby zbadać jego potencjał. Chociaż eksperymenty w żaden sposób nie dowodzą użyteczności CSS3, naprawdę pokazały prawdziwe możliwości CSS3, do tego stopnia, że główni programiści uważają CSS3 za przyszłość.

Czy to prawda? Osądzaj to swoimi oczami. W tej gablocie nie będziemy pokazywać niczego, tylko po prostu 38 inspirujących demonstracji animacji opartych na CSS3 to wyłącznie odkrywa prawdziwy potencjał CSS3. Oprócz czystych eksperymentów zobaczysz również praktyczne przykłady zastosowania CSS3 w projektowaniu stron internetowych, aby uczynić go słodszym i bardziej seksownym.

Wystarczy powiedzieć, zbadajmy fantastyczny świat CSS3!

Możesz być zainteresowanym także tym:

Przewodnik dla początkujących do CSS3
Tworzenie Rocking CSS3 Search Box
Budowanie stron HTML5 / CSS3
Pełne wdzięku menu nawigacyjne w CSS3
Utwórz formularz kontaktowy HTML5 / CSS3 oparty na Ajax
35 Grafika zbudowana czysto z CSS3
więcej…

Zdecydowanie zaleca się przeglądanie tych wersji demonstracyjnych przy użyciu najnowszej wersji przeglądarki Google Chrome w wersji Safari lub Developer. Większość wersji demonstracyjnych obsługuje jednak najnowszą wersję Firefoksa i Google Chrome.

Animowana spirala 3D

Pierwszy na liście to niesamowita animacja autorstwa Marcofolio.net, wykorzystująca transformacje 3D CSS3. Animacja wygląda jak sama magia, ale w rzeczywistości możesz nauczyć się tworzyć podobny efekt za pomocą samouczka w artykule!

Animowane przyciski

Koniecznie trzeba zobaczyć projektanta stron internetowych, ponieważ demo nie tylko pokazuje możliwości animacji CSS3, ale także zapewnia bardzo fajne i praktyczne efekty przycisków do inspiracji!

Menu animacji

Próbujesz uatrakcyjnić menu animacji, aby wyglądały naprawdę fajnie i kreatywnie? To demo jest dla Ciebie.

AT-AT Walker

Inspirujące demo animacji pokazujące potencjał CSS3 w animowaniu jednostki z częściami ciała.

Pole bitwy CSS3

Battlefield CSS3 z dużą ilością eksplozji i strzałów!

Wielka rzecz

To gładka i miła animacja, która sprawiła, że to demo było wielką sprawą.

Czy Haz Ur Cursor?

“Cześć, jestem Cursor Monster. Mój tata ma dla ciebie wiadomość: „Proszę, nie używaj kursor: brak, chyba że utworzysz potwora jedzącego kursor ”.”

Dock CSS

Seksowny eksperyment naśladujący stację dokującą Mac OS X i jest naprawdę płynny.

CSS3 Człowiek

Uważaj, nadchodzi człowiek CSS3! Doskonały przykład, aby pokazać prawdziwy potencjał animacji CSS3.

Odbijanie piłki Dribbble

Przy niewielkim użyciu sztuczek graficznych przychodzi miła i zabawna animacja CSS3.

Dulla

Dulla pokazuje jedną z najpopularniejszych technik tworzenia gry platformowej 2D, która jest teraz możliwa także w CSS3.

Animacja klatka po klatce

Animacja klatka po klatce z CSS3? Nie ma problemu!

Animacja wykresu

Prosta, ale potężna animacja, aby pokazać / wyjaśnić wykres na swojej stronie, nauczyć się go tworzyć!

Wysoki

Tajemnicza animacja muzyczna, która dynamicznie wyświetla obrazy z wyszukiwarki Google w czasie rzeczywistym, a wyświetlane obrazy są oparte na tekstach piosenek.

Efekty najechania

Przyszłość efektu hover pochodzi z CSS3. Elegancki i obiecujący.

Ja jestem Joseph Barrett

CSS3 zintegrowany z ikonami mediów społecznościowych witryny portfolio. To nie tylko zabawa, ale także kreatywność projektanta.

Nieskończony zoom

Płynna animacja, także przyjemny sposób na zaprezentowanie swojego portfolio. Całkowity zoom dla 26 obrazów wynosi 67108864: 1.

Kinect i CSS3

“14 przegubów ciała jest śledzonych i przekształcanych w krótką animację CSS przy użyciu Xbox Kinect. Dane ciała są przenoszone do przeglądarki, gdzie są analizowane i przekształcane w animacje CSS za pomocą animatable.com.”

Matryca

Chcesz być tak fajny jak Matrix? Dzięki CSS3 możesz to zrobić.

Morphing Cubes

Eksperymentalne demo eksplorujące CSS3 przy użyciu transformacji 3D, animacji i przejść. Ciekawą częścią jest to, że nadal możesz wybrać tekst na elementach, nawet jeśli wciąż się obracają.

Nasz układ Słoneczny

Nie potrzebujesz drogiego, samodzielnego oprogramowania, aby pomóc uczniom w odkrywaniu układu słonecznego.

Duff Roll

“Mmmmmm… .Homer kochałby niekończące się zapasy piwa.”

Koło z plakatem

Prosty, ale interesujący przykład pokazujący, jak używać transformacji i animacji CSS, aby uzyskać interesujący efekt.

Wielebny Niebezpieczeństwo

Kto może oprzeć się stronie internetowej z naprawdę uroczymi postaciami i zabawnymi animacjami?

Rofox

Bezproblemowa i zabawna animacja, pobierz kod źródłowy, aby spróbować samodzielnie!

Baranek Shaun

“Oglądaj wybryki Shauna i jego przyjaciół w klipach z „An Ill Wind”, „Snowed In”, „The Big Chase” i „Twos Company” poprzez interaktywny eksperyment stworzony przy użyciu przyspieszonego sprzętowo wideo HTML5, transformacji 3D CSS i WebM.”

Przestrzeń

Być może przestrzeń jest ostatecznym limitem dla CSS3.

Przestrzenny CaCSS

Stwórz magiczny efekt w ten sposób, że nie jest to trudne w CSS3, ponieważ są głównie powtarzający się gradient radialny i rozmiar tła zaangażowany. Wariacje są możliwe przy rozsądnej ilości poprawek.

Star Wars Crawl

Efekt raczkowania w Star Wars! Tak samo epicki jak CSS3.

Ekspresyjna sieć

Ekspresyjna sieć nie tylko przedstawia CSS3 i jego obsługę przeglądarki, odniesienia i dokumentację, ale także prezentuje niesamowitą animację CSS3 na swojej stronie internetowej.

The Head-Heads

Używanie typów do tworzenia cienia, który wygląda jak ludzka twarz, kto by pomyślał, że byłoby to możliwe dzięki CSS3?

Człowiek z Hollywood

Widziałeś kiedyś te atrakcyjne animacje, używając tylko czystej typografii? Możesz to zrobić za pomocą CSS3.

Planetarium

Po prostu epickie demo poświęcone odkrywaniu planetarium ze szczegółami. W grę wchodzą SVG, JavaScript, HTML5, CSS3, czcionki i typy.

Wpisz Deszcze

“Prognoza na dziś, zakładając, że korzystasz z nowoczesnej przeglądarki, jest mętna, ze 100% szansą na prysznice w Gruzji.”

Efekty typografii

Oprócz efektów przycisków, menu i zawisu możesz także uzyskać kreatywne efekty typograficzne za pomocą CSS3. jQuery jest również zaangażowany w to demo, aby stylizować litery słów.

Chodzenie z Andrew Hoyerem

Co najlepsze, możesz także nauczyć się chodzić z Andrew Hoyerem w artykule!

Wonder Webkit

Wspaniałe wykorzystanie transformacji 3D CSS3 z biblioteką JavaScript Matrix. Brzmi technicznie, ale wynik jest niesamowicie fajny.

Zoetrope

Co jeszcze nie możesz zrobić z CSS3, gdy możliwe jest użycie Zoetrope?

Odbicie

Inspirujący? tak. Praktyczny? Być może. Technika animacji jest zawsze tematem drapania głowy dla twórców i animatorów, ponieważ wymaga pewnego poziomu wiedzy, aby stworzyć naprawdę płynną, wyjątkową i stylową animację. Podczas gdy CSS3 ma możliwość wykonywania animacji, nie oznacza to, że jest to odpowiednie narzędzie do animacji. Myślę, że w końcu wciąż chodzi o twoje preferencje, jak dla mnie, jestem w porządku z obydwoma, o ile narzędzie odpowiada potrzebom projektu.

Co sądzisz o tych animacjach CSS3? Czy te animacje CSS3 są dobre tylko jako eksperymenty, czy też mogą być zastosowane w prawdziwym projekcie WWW? Jak zwykle witamy waszą cenną myśl na ten temat i informujemy nas o swoim ulubionym kawałku animacji CSS3!

Więcej

Po prostu prezentacja, naprawdę? Zasłużyłeś na więcej! Poniżej znajdują się tutoriale i przewodniki CSS3 od Hongkiat do Ciebie, miło spędzić czas na ich odkrywaniu!