50+ примеров Jquery / CSS3 анимации, похожей на флэш

Мы собрали для вас подборку лучших примеров JQuery анимации и CSS3. Вы можете посмотреть исходный код, чтобы понять, как анимируется каждый из примеров.

Содержание

Работающие часы на основе CSS3

Работающие часы на CSS3, в примере используется анимация и фигуры CSS, без изображений или JavaScript:


Демо-версия Скачать

Анимированные облака на CSS3

В данном примере используется только анимация CSS3:


Демо-версия Скачать

Анимированные иконки погоды на CSS3


Демо-версия Скачать

Анимации загрузки на CSS3

Несколько экспериментов с индикаторами загрузки на основе CSS3 без JQuery анимации появления. Получайте удовольствие и не забудьте поделиться тем, что вы узнаете:


Демо-версия Скачать

3D вращающаяся планета на основе CSS3

Отличная идея и сочетание двух концепций. А немного доработав масштабирование и анимацию, можно удивительный результат!

Демо-версия Скачать

Эффект анимации текста


Демо-версия Скачать

3D анимированная диаграмма

3D диаграмма, созданная с помощью HTML и CSS3-преобразований. Тени созданы с помощью градиентов CSS, анимация — с помощью переходов. AngularJS используется для обновления данных:


Демо-версия Скачать

JQuery эффект анимации снега


Демо-версия Скачать

CSS3-анимации загрузки


Демо-версия Скачать

Анимированная иконка гамбургер-меню на CSS3


Демо-версия Скачать

AT-AT (шагающий броневик из Звездных войн) на CSS3

Пример, который я создал на CSS3. Можно было бы, конечно, уменьшить количество div, использованных для создания частей тела. Также стоило бы оптимизировать пример и добавить класс JQuery с анимацией:


Демо-версия Скачать

Gran Turismo


Демо-версия Скачать

3D Солнечная система


Демо-версия Скачать

Анимация дыма

Это CSS3-версия анимации. Клубы дыма создаются без изображений, а анимация задается без использования JavaScript и JQuery эффектов анимации:


Демо-версия Скачать

Анимированный логотип


Демо-версия Скачать

IE10 3D куб


Демо-версия Скачать

Анимация языков пламени на основе CSS3


Демо-версия Скачать

Логотип Бэтмена на -webkit- CSS3 анимация


Демо-версия Скачать

Концепт дизайна погодного приложения на основе CSS


Демо-версия Скачать

Анимация природы на CSS3


Демо-версия Скачать

Гуляющий кот (цикл без JQuery анимации)


Демо-версия Скачать

3D-терминал на CSS3


Демо-версия Скачать

Анимированный график на CSS3

Линейный график на HTML и CSS3. При наведении курсора мыши на раздел отображается его название. Данные заполняются и обновляются с помощью AngularJS. Преобразование вращения вручную применено к точкам графика, а анимация задается с помощью переходов CSS3:


Демо-версия Скачать

Вращающиеся 3D HTML-формы с помощью CSS3


Демо-версия Скачать

Анимации индикатора подключения на основе CSS3


Демо-версия Скачать

Steps-анимация на Jquery

Анимации JQuery пример, иллюстрирующий функцию тайминга анимации: steps() в сочетании с листом спрайтов:


Скачать / Дополнительная информация

Продвинутая анимация траектории

Анимация с применением SVG, которая может пригодиться при разработке анимации траектории:


Скачать / Дополнительная информация

Анимации прокручивания с использованием wow.js


Скачать / Дополнительная информация

Анимация с использованием листов спрайтов на CSS

Ниже приводятся пример с использованием листов спрайтов с пояснениями без JQuery эффектов анимации:


Скачать / Дополнительная информация

Анимированный логотип для Herr Brueckers


Скачать / Дополнительная информация

Анимация рисования контура


Скачать / Дополнительная информация

Бесконечная анимация галереи на основе анимации блока JQuery


Скачать / Дополнительная информация

Анимированные круги с использованием CSS / SVG


Скачать / Дополнительная информация

SVG-анимация с помощью CSS

Пример того, как анимировать SVG. Для демонстрационных целей я использовал иконки «Small Icons» Ника Фроста и Грега Лапена:


Скачать / Дополнительная информация

CSS3 параллакс анимация боевых истребителей от MySkins Studio

Это еще одна CSS3 анимация, созданная с использованием параллакса CSS3 и кейфреймов, но без JQuery анимации:


Скачать / Дополнительная информация

Анимированный SVG-логотип


Скачать / Дополнительная информация

Плоская анимированная круговая иконка на основе CSS3


Скачать / Дополнительная информация

Анимация с setTimeout

Небольшой пример синхронизации анимации, в которой вокруг экрана перемещается шар, с помощью setTimeout:


Скачать / Дополнительная информация

SVG-анимация солнца с использованием CSS


Скачать / Дополнительная информация

JQuery-анимация

Простая JQuery анимация:


Скачать / Дополнительная информация

CSS-анимация орбиты Земли


Скачать / Дополнительная информация

Анимация летящей птицы на CSS3


Скачать / Дополнительная информация

Анимация атома на основе CSS3


Скачать / Дополнительная информация

3D-анимация часов с использованием JS

В процессе разработки использовались 3D-эффекты CSS3 и JQuery анимация текста. Пример работает в Google Chrome 28.0 и Firefox 22.0. В то же время анимация не работает в IE 10 из-за какой-то ошибки доступа JQuery, которую я не удосужился исправить:


Скачать / Дополнительная информация

Анимированное Лондонское обзорное колесо из двух элементов


Скачать / Дополнительная информация

Анимация Drag Race

Анимация гонок на чистом CSS / HTML:


Скачать / Дополнительная информация

Анимированный праздничный торт


Скачать / Дополнительная информация

Анимированный логотип

Этот анимированный логотип без JQuery эффектов анимации выглядит очень элегантно:


Скачать / Дополнительная информация

Анимированный логотип компании на основе CSS3

Анимированный логотип компании на чистом HTML / CSS3:


Скачать / Дополнительная информация

Анимированная иконка камеры


Скачать / Дополнительная информация

Анимация оранжевого автомобиля


Скачать / Дополнительная информация

Анимированная иконка Wi-Fi


Скачать / Дополнительная информация

Анимированные адаптивные CSS- иконки погоды

Это небольшой набор анимированных иконок погоды на CSS. Обратите внимание, что большая часть анимации создается с помощью псевдо-элементов и JQuery анимации:


Скачать / Дополнительная информация

Анимированный виджет панели инструментов


Скачать / Дополнительная информация

Анимированная банка Pepsi на основе CSS3

Скачать / Дополнительная информация

Анимированный аквариум с рыбкой на CSS3


Скачать / Дополнительная информация

Анимация простых 3D-фигур на чистом CSS

Набор простых 3D-фигур, анимированных на чистом CSS3 без JQuery эффектов анимации. Позже я добавлю другие фигуры:


Скачать / Дополнительная информация

Анимированная страница «Скоро в продаже»

Этот заполнитель для страницы «Скоро в продаже» был разработан для одного из клиентов. Позже решили добавить «изюминку» для посетителей с современными браузерами:


Скачать / Дополнительная информация

Анимация танцующей девочки

Очень милая анимация танцующей девочки создана с использованием CSS3 и без JQuery анимации! Все движения тела девочки созданы с использованием основных фигур CSS и некоторых дополнительных свойств, таких как borders, shadows, gradients и т.д.:


Скачать / Дополнительная информация

Анимированный логотип Windows 8 на CSS3

Анимированный логотип Windows 8, разработанный за 5 минут с помощью CSS3. Он создается с помощью преобразования перспективы CSS3, которое затем анимируется свойствами анимации и кейфреймами:


Скачать / Дополнительная информация

Анимированный логотип со «Смеющимся человеком»

Смеющийся человек — это известный хакер из аниме «Призрак в доспехах: Синдром одиночки«. Он размещал анимированный логотип со своим лицом, взламывая киберсистемы:


Скачать / Дополнительная информация

Анимированные шестеренки на CSS3 и JQuery эффектах анимации


Скачать / Дополнительная информация

Анимация вызова в Skype

Моя попытка воссоздать анимацию вызова в мобильном приложении Skype (которую я видел на своем iPad) с помощью CSS:


Скачать / Дополнительная информация

Анимация летящей птицы — один элемент CSS


Скачать / Дополнительная информация

HTML5 Canvas анимация травы


Скачать / Дополнительная информация

Анимация фенакистископа на CSS3


Скачать / Дополнительная информация

Данная публикация представляет собой перевод статьи «50+ JQUERY CSS3 ANIMATION EXAMPLES LIKE FLASH ANIMATION» , подготовленной дружной командой проекта Интернет-технологии.ру

Меню