30 готини CSS анимации, които трябва да видите

По-рано публикувахме текстовите ефекти, които можете да направите с CSS, и много други страхотни неща, които не сте смятали, че е възможно да направите с CSS. Тази компилация обаче се фокусира върху много неща, които можете да анимирате с CSS, и много от тези творения ще ви накарат да вдигнете вежда или две..

От анимации за зареждане до превключване и модални прозорци до разклащане на елементи, тази купчина 30 необичайни и креативни приложения на CSS анимация може да отвори ума ви за повече начини, по които можете да играете с CSS анимации, които вероятно никога не сте мислили преди.

CSS Loading Анимация От patrikhjelm

Седем анимирани точки се преместват наляво и надясно, за да обозначат действие за зареждане.

Анимирани икони на количката за пазаруване от jonitrythall

Сладки анимирани ефекти, когато хранителните продукти се добавят към количката за пазаруване. Превъртете надолу за още.

Hamburger CSS3 само анимация от Dawid Krajewski

Построен с чист CSS, без JS или с нищо друго.

404 анимирани символи от Ес

Поне с тази страница за грешка разработчикът работи върху него. Дори и да е 404.

CSS Марс Кацане от Миджич

Ние кацнахме на Марс! Изработен с CSS.

Отмъстителят от Мариомасели

Можете ли да чуете гнева на Хълк да се тресе през екрана? Готино, нали?

Превключване на ден / нощ От jsndks

Сега можете да превключвате ден и нощ с CSS. Гениална идея!

Приложението на трето лице на Google Now чрез коксам

Приложения на трети страни на Google Now, анимирани.

Clo clo От Judag

Дали петел се движи така? Обзалагате се, че е пълна с джигги. Страхотна практика на CSS3.

Анимация на иконата на менюто от mariusbalaj

Проста идея за действие; гледайте бутона на менюто да се материализира, когато превъртите надолу.

Друг CSS Preloader от Maseone

Анимация за CSS ритмично зареждане. Хипнотично, нали??

Изпрати бутон от оръжието

Кликнете, за да подадете, а бутонът анимира процеса на зареждане до приключване на изпращането!

Еластичен SVG Sidebar Материал дизайн от suez

Плъзнете бялата лента надясно, за да видите еластичен ефект на страничната лента.

Бутон за частици От igcorreia

Направете това, което бутонът казва: задръжте за страхотно.

Гуол бутон От Lucas Bebber

Кликнете за ефекта Gooey. Ще го получите, след като го видите, и ще кликнете върху него няколко пъти повече. Amirite?

Бутон за обратната страна от hakimel

Кликнете върху която и да е страна на бутона „Изтрий“ и бутонът ще се завърти според мястото, където щраквате.

Истинско меню за хамбургер! От CharlesSmart

Истински вкусно меню за хамбургер. Кликнете върху хамбургера за ефекти

Закръгвам от yy

Вижте мотоциклет.

3D куба вълна От waddington

Свещени 3D кубчета!

Анимация на подпис По хигиена

Ето подпис, който всъщност не е GIF анимация, а вместо това PNG последователност, анимирана с CSS3.

Анимация на градиента на фона По quasimondo

Този трик променя градиента на фона от един цвят към друг в гладка, непрекъсната форма.

Икона за превключване на звездни войни По rss

Меню хамбургер се превръща в мечове в битка (кръст).

GIF стил анимация От жасча

Гледайте, докато снимката се материализира от средата на пикселното изкуство.

Фокусирайте входната / изходната анимация на входа

Малко анимирани анимирани писалки пише отгоре форома, който попълвате.

Хроматичен триъгълник

Страхотна оптична илюзия, да, направена с CSS3.

Кафе машина

Ето напомняне да вземете дневната си доза кафе. Както е необходимо.

Хромиран динозавър Чрез никспиел

Не можете да стигнете до страницата, която искате да бъде, поради оттеглена връзка? Ето динозавъра, който винаги виждате, когато това се случи, само че този път той се движи от метеорит!

Разклащане на CSS От elrumordelaluz

Задръжте курсора на мишката над всеки ефект, за да гледате как малкият човек се разклаща.

Люлка на Нютон от всички неща Smitty

Ако познаваш физиката, със сигурност знаеш люлката на Нютон, но вероятно не е така.

Стартирайте модела By Koolhaus

Кликнете, за да видите приятната и гладка анимация на модалните прозорци.

Пешеходен робот С P233

Този робот просто продължава да върви, да върви и да върви около оста Y.

Сгъване на стрелките за маркиране от Хаким

От първата страница до последната, тази анимация на страниците ясно показва как, ако се справяте, настрани.

Сега прочетете: 15 красиви текстови ефекта, създадени с CSS