30 fajnych animacji CSS, które musisz zobaczyć

Wcześniej opublikowaliśmy kreatywne efekty tekstowe, które można tworzyć za pomocą CSS, i wiele innych fajnych rzeczy, których nie można było zrobić za pomocą CSS. Ta kompilacja skupia się jednak na wielu rzeczach, które możesz animować za pomocą CSS, a wiele z tych kreacji sprawi, że podniesiesz brew lub dwie.

Od ładowania animacji do przełączania i modalnych okien do potrząsania elementami, tego stosu 30 niezwykłych i kreatywnych zastosowań animacji CSS możesz otworzyć swój umysł na więcej sposobów gry z animacjami CSS, o których nigdy wcześniej nie pomyślałeś.

Ładowanie animacji CSS Przez patrikhjelm

Siedem animowanych kropek przesuwających się w lewo i prawo, aby oznaczyć akcję ładowania.

Animated Shopping Cart Icon by jonitrythall

Śliczne animowane efekty, gdy artykuły spożywcze są dodawane do koszyka. Przewiń w dół, aby uzyskać więcej.

Hamburger CSS3 tylko animacja Dawida Krajewskiego

Zbudowany z czystego CSS, bez JS lub czegokolwiek innego.

404 animowana postać By With An Es

Przynajmniej na tej stronie błędu pracuje programista. Nawet jeśli jest to 404.

CSS Mars Landing autorstwa mgitch

Wylądowaliśmy na Marsie! Wykonane z CSS.

The Avenger By mariosmaselli

Czy słyszysz gniew hulka, który wstrząsa ekranem? Fajnie, dobrze?

Przełączanie dzień / noc Przez jsndks

Teraz możesz przełączać dzień i noc za pomocą CSS. Genialny pomysł!

Aplikacja Google Now 3rd party według codecalm

Aplikacje firm zewnętrznych Google Now, animowane.

Clo clo By judag

Czy kogut porusza się w ten sposób? Założę się, że tak, kompletnie z jiggy neck. Świetna praktyka CSS3.

Animacja ikony menu przez mariusbalaj

Prosty pomysł na działanie; obserwuj, jak przycisk menu materializuje się, gdy przewijasz w dół.

Kolejny preloader CSS firmy Maseone

Niesamowita animacja ładowania rytmicznego CSS. Hipnotyczny, prawda?

Prześlij przycisk przez auginator

Kliknij, aby przesłać, a przycisk animuje proces ładowania do momentu zakończenia przesyłania!

Elastyczny SVG Sidebar Material Design suez

Przeciągnij biały pasek w prawo, aby zobaczyć efekt elastycznego paska bocznego.

Przycisk cząstek Przez igcorreia

Rób to, co mówi przycisk: zatrzymaj się, by podziwiać wspaniałość.

Przycisk Gooey Lucas Bebber

Kliknij, aby uzyskać efekt Gooey. Otrzymasz go, gdy go zobaczysz, a klikniesz go kilka razy więcej. Amiryt?

Przycisk Flipside Przez hakimel

Kliknij dowolną stronę przycisku Usuń, a przycisk będzie się obracał w zależności od tego, gdzie klikniesz.

Prawdziwe menu hamburgerów! CharlesSmart

Naprawdę pyszne menu hamburgerowe. Kliknij hamburgera, aby uzyskać efekty

Cruisin 'przez yy

Zobacz motocykl.

Fala kostki 3D Przez watdington

Święte kostki 3D!

Animacja podpisu By drygiel

Oto podpis, który w rzeczywistości nie jest animacją GIF, ale sekwencją PNG animowaną za pomocą CSS3.

Animacja gradientu tła Przez quasimondo

Ta sztuczka zmienia gradient tła z jednego koloru na drugi w gładkiej, ciągłej formie.

Ikona przełącznika Gwiezdne wojny Przez rss

Menu hamburgera zostaje przekształcone w miecze świetlne w bitwie (krzyż).

Animacja stylu GIF By jascha

Zobacz, jak fotografia materializuje się w środku sztuki pikseli.

Skupienie animacji wejścia / wyjścia przez fluxus

Trochę animowanego pióra animowanego zapisu na forom, które wypełniasz.

Trójkąt chromatyczny Przez felipedefarias

Niesamowite złudzenie optyczne, tak, zrobione za pomocą CSS3.

Ekspres do kawy Przez tenisroger

Oto przypomnienie, aby wziąć dzienną dawkę kawy. Tak jak potrzebujesz.

Chromowany dinozaur Przez nickspiel

Nie możesz dotrzeć do strony, z której chcesz zrezygnować? Oto dinozaur, który zawsze widzisz, kiedy to się dzieje, tylko tym razem ucieka od meteorytu!

Wstrząs CSS Przez elrumordelaluz

Najedź myszą na każdy efekt, aby zobaczyć, jak mały facet się trzęsie.

Ładowarka kołyski Newtona według wszystkich rzeczy Smitty

Jeśli znasz fizykę, na pewno znasz kołyskę Newtona, ale prawdopodobnie nie tak.

Uruchom Modal By koolhaus

Kliknij, aby zobaczyć ładną i płynną animację okna modalnego.

Walking Robot By P233

Ten robot po prostu idzie dalej, chodzi i chodzi po osi Y..

Wyginanie strzałek paginacji przez Hakima

Od pierwszej do ostatniej strony, ta animacja stronicowania wyraźnie pokazuje, jak sobie radzisz, pagewise.

Odczyt: 15 pięknych efektów tekstowych utworzonych za pomocą CSS