38 Вдъхновяващ CSS3 Анимация Демо
От въвеждането на CSS3 наистина има много горещи дебати, които се въртят около възможностите и използваемостта му. Въпреки това, има и много интересни експерименти, ръчно изработени, за да изследват неговия потенциал. Въпреки че експериментите по никакъв начин не доказват ползваемостта на CSS3, те наистина показват истинските възможности на CSS3, до голяма степен, че големите разработчици смятат, че CSS3 е бъдещето.
Вярно ли е? Съдете го с очите си. В тази витрина ще покажем нищо, но просто 38 вдъхновяващи CSS3 анимационни демонстрации които откриват истинския потенциал на CSS3. Освен чистите експерименти, ще видите и някои практически примери за това как CSS3 може да бъде приложен в уеб дизайна, за да стане по-сладък и по-секси.
Достатъчно казано, нека да проучим фантастичния свят на CSS3!
Може да се интересувате и от:
- Ръководство за начинаещи към CSS3
- Създаване на люлеещо се поле за търсене на CSS3
- Изграждане на HTML5 / CSS3 уеб страници
- Грациозно меню за навигация в CSS3
- Създайте Ajax-базиран HTML5 / CSS3 формуляр за контакт
- 35 Графика, построена изцяло с CSS3
- Повече ▼…
Препоръчваме ви да видите тези демонстрации, като използвате последната версия на Safari или версията на Google Chrome за програмисти. Повечето демонстрации поддържат последната версия на Firefox и Google Chrome.
Анимиран 3D Helix
Първият в списъка е невероятна анимация, направена от Marcofolio.net, с помощта на CSS3 3D трансформации. Анимацията прилича на самата магия, но всъщност можете да се научите да създавате подобен ефект с урока в статията!
Анимирани бутони
Задължително посещение за уеб дизайнер, тъй като демонстрацията не само показва възможностите на CSS3 анимацията, но и осигурява много хладни и практични ефекти от бутоните за вдъхновение.!
Анимация Менюта
Опитвате се да подправите анимационните си менюта, за да изглеждат наистина страхотно и творчески? Тази демонстрация е за вас.
AT-AT Уокър
Вдъхновяваща демонстрация на анимация, показваща потенциала на CSS3 за анимиране на единица с части от тялото.
CSS3 на бойното поле
Battlefield CSS3 с много експлозии и изстрели!
Голяма работа
Това е гладката и хубава анимация, която направи тази демонстрация голяма работа.
Може да е Haz Ur Cursor?
“Здравейте, аз съм Курсор Чудовището. Моят татко има послание за вас: „Моля, не използвайте курсора: няма, освен ако не създадете курсор, който яде чудовище.”
CSS Dock
Сексуален експеримент, имитиращ док на Mac OS X, и е наистина гладък.
CSS3 Човек
Внимавай, тук идва човекът от CSS3! Перфектен пример за представяне на истинския потенциал на CSS3 анимацията.
Dribbble Ball Bouncing
С малкото използване на графични трикове идва хубава и забавна CSS3 анимация.
Dulla
Dulla почти показва една от най-често използваните техники за създаване на 2D платформинг игра, която сега е възможна и с CSS3.
Анимация по кадър по кадър
Анимация по кадър с CSS3? Няма проблем!
Анимация на графиката
Една проста, но мощна анимация, за да покажете / обясните графиката в сайта си, да се научите да го правите!
Високо
Тайнствената музикална анимация, която показва изображенията от Google Търсене динамично в реално време и показваните изображения се основават на текстовете на песните.
Ефекти при навъртане
Бъдещето на ефекта на hover идва с CSS3. Елегантен и обещаващ.
Аз съм Джоузеф Барет
CSS3 е интегриран в иконите на социалните медии в сайта на портфолиото. Това не е само забавно, но и показва творчеството на дизайнера.
Безкрайно мащабиране
Гладка анимация, също хубав начин да покажете портфолиото си. Общото увеличение за 26-те изображения е 67108864: 1.
Kinect и CSS3
“14 телесни стави се проследяват и преобразуват в кратка CSS анимация, използвайки Xbox Kinect. Данните за тялото се въвеждат в браузъра, където се анализират и конвертират в CSS анимации с animatable.com.”
матрица
Искате ли да сте толкова готини като Матрицата? С CSS3 можете да го направите.
Морфинг кубове
Експериментална демонстрация, изследваща CSS3, използвайки 3D трансформации, анимации и преходи. Интересното тук е, че все още можете да изберете текста на елементите, дори когато те все още се въртят.
Нашата слънчева система
Нямате нужда от скъп самостоятелен софтуер, за да помогнете на учениците да изследват повече слънчевата система.
Duff Roll
“Mmmmmm .... Хомер би харесал безкрайната доставка на бира.”
Плакат кръг
Един прост, но интересен пример за това как да използвате CSS трансформация и анимация за постигане на интересен ефект.
Преподобна Опасност
Кой може да устои на уебсайт с много сладки герои и забавни анимации?
Rofox
Безпроблемно и забавно анимация, изпробвайте собствения си изходен код!
Овце Шон
“Гледайте шегите на Shaun и неговите приятели в клипове от „An Ill Wind“, „Snowed In“, „The Big Chase“ и „Twos Company“ чрез интерактивен експеримент, създаден с хардуерно ускорено HTML5 видео, 3D CSS Transforms и WebM.”
пространство
Може би мястото е крайната граница за CSS3.
Space CaCSS
Създаване на магически ефект като този не е много трудно с CSS3, тъй като там са предимно просто повтаряне-радиален наклон и фон размер участващи. Възможни са вариации с разумно количество ощипвания.
Пъзел със звезди
Ефектът на пълзене от отварянето на Star Wars! Също толкова епична като CSS3.
Експресивната мрежа
Експресивният уеб-сайт не само ви запознава с CSS3 и неговата поддръжка на браузъра, справки и документация, но също така показва и невероятна CSS3 анимация на своята уеб страница.
Главите на буквите
Използвайки типове, за да създадем сянка, която прилича на човешкото лице, който би си помислил, че ще бъде възможно с CSS3?
Човекът от Холивуд
Някога виждали ли сте тези атрактивни анимации само с чиста типография? Е, можете да го направите и с CSS3.
Планетариумът
Просто епична демонстрация за проучване на планетариума с подробности. Включват се SVG, JavaScript, HTML5, CSS3, шрифтове и типове.
Тип дъжд
“Прогнозата за днес, ако приемем, че използвате модерен браузър, е облачно, с 100% шанс за Грузия.”
Ефекти за типография
Освен бутони, менюта и ефекти на навигиране, можете да постигнете и творчески типографски ефекти с CSS3. jQuery също участва в тази демонстрация, за да оформя буквите на думите.
Ходене с Андрю Хойер
Най-хубавото е, че можете да се научите да ходите с Андрю Хойер в статията!
Чудя се Webkit
Чудесно използване на CSS3 3D трансформации с JavaScript матрична библиотека. Звучи технически, но резултатът е страхотно хладен.
Zoetrope
Какво друго не можете да направите с CSS3, когато Zoetrope е възможно с него?
размисъл
Вдъхновяваща? да. Практичен? може би. Техниката на анимацията винаги е предмет на надраскване на главата за разработчик и аниматор, тъй като изисква определено ниво на знания, за да произведе наистина гладка, уникална и стилна анимация. Докато CSS3 има възможност да прави анимацията, това не означава, че е подходящ инструмент за анимация. Мисля, че в крайна сметка все още е за предпочитанията ви, както и за мен, и аз съм съгласен с двата вида, стига инструментът да отговаря на нуждите на проекта.
Какво мислите за тези CSS3 анимации? Дали тези анимации в CSS3 са добри само като експерименти, или могат също да бъдат приложени в уеб дизайна на реалния живот? Както обикновено, ние приветстваме вашата ценна мисъл по темата и ни кажете и за любимата си част от CSS3 анимацията!
| Повече ▼
Просто витрина? Заслужихте да получите повече! По-долу са описани уроците и ръководствата на CSS3 от Hongkiat за вас, приятно време да ги разгледате!
