В посте собрана подборка различных эффектов и анимации CSS, которые могут пригодиться в работе, а кроме того избавят от необходимости постоянно прибегать к JavaScript. Возможно примеры не самые новые и необычные, но на мой взгляд, полезные.
Эти часы созданы с использованием одного из основных инструментов CSS3 – rotate и с подключением библиотеки JQuery.
![](https://habrastorage.org/files/5ea/b92/1bd/5eab921bd90d423a81e730f652219f63.png)
Более классические, аналоговые часы. Они созданы с помощью webkit transition и свойства transform CSS. А вот для того, чтобы время соответствовало текущему, понадобиться JavaScript.
![](https://habrastorage.org/files/4df/5de/a01/4df5dea012124046b4e8a416a8ae7ac6.png)
Вращение и перемещение по сторонам куба будет производиться стандартными клавишами «вверх», «вниз», «влево» и «вправо». Сама 3D-фигура построена с использованием webkit-perspective, -webkit-transform и -webkit-transition.
![](https://habrastorage.org/files/b86/379/632/b8637963258946049b669800e3aba16a.png)
Здесь представлено уже несколько 3D-кубов, использующих CSS3 и непосредственно свойства transform и transition. Наведение курсора на куб заставляет его отъехать в сторону, открывая текст, который находиться на другой стороне фигуры.
![](https://habrastorage.org/files/dd5/f5d/93c/dd5f5d93c336458ea52a95e13173dcd6.png)
Эффект «меню-гармошки» на чистом CSS, где клик по каждой из строк открывает дополнительное окно в теле самого списка. Собственная анимация в браузерах на базе WebKit.
![](https://habrastorage.org/files/f6c/0a8/839/f6c0a883996546919864d185762860f0.png)
Это анимированный автоматический параллакс-скроллинг с использованием CSS переходов на основе WebKit. При наведении на текстовое окно, звезды на фоне начинают плавно двигаться в сторону. Создается эффект полета.
![](https://habrastorage.org/files/064/dac/df6/064dacdf6ec34d6f8aeccb8c9dde41c2.png)
Культовый фильм «Матрица» — одна из лучших фантастических кинокартин. На примере показано, как воссоздать примерно такую же удивительную анимацию (черный экран с бегущими цифрами) в CSS3.
![](https://habrastorage.org/files/81c/d7d/e66/81cd7de66ef64e89a9d728ea2edb95cd.jpg)
В этом примере проводится подробное описание создания анимированных фотографий, основанной на командах CSS3. При клике на изображение, оно увеличивается и выдвигается на передний план.
![](https://habrastorage.org/files/d4e/b7b/fbd/d4eb7bfbd26c42e7ad60cb09c3177ef5.png)
В этом примере картинки просто увеличиваются при наведении. Незамысловатый, но порой весьма полезный эффект.
![](https://habrastorage.org/files/cb5/273/b5f/cb5273b5f9fd4e1faeee6d6757896c44.png)
В качестве альтернативы JavaScript, в посте предложено семь эффектов на CSS3: различные блоки, которые вращаются, исчезают, выезжают, увеличиваются и т.д.
![](https://habrastorage.org/files/91f/73c/d64/91f73cd6467145ca90a087d6df74bceb.png)
В посте рассказывается, как создать крутящиеся пластинки. Скорость вращения можно регулировать прямо на экране.
![](https://habrastorage.org/files/437/0db/7b7/4370db7b78744dcc9ff8daae763f54cd.png)
Эффект скольжения виниловых пластинок создается с помощью переходов CSS3 и HTML. Подобная анимация оживляет веб-страницу, добавляет оригинальности стандартной обложке альбома и т.д.
![](https://habrastorage.org/files/6c2/2d3/fc6/6c22d3fc61c94a8b80c660a77558c458.png)
При наведении курсора на изображение, оно может сместиться в сторону, завертеться, уменьшиться, из квадратного преобразоваться в круглое, стать размытым… Словом, картинки будут всячески менять свои свойства.
![](https://habrastorage.org/files/c49/59d/e7a/c4959de7aac74e1b965f90eda0268c3b.png)
При нажатии на треугольник, он начинает вращаться.
![](https://habrastorage.org/files/f8e/824/a61/f8e824a6169e43f8acbfab3a2ce8b6ae.png)
Целое космическое пространство, умещенное в CSS. Выступает примером наложения вращающихся слоев (более заметно при уменьшении масштаба изображения в браузере).
![](https://habrastorage.org/files/137/987/c23/137987c2354045d19082af673030ccf5.png)
Интересный эффект CSS, с помощью которого известная картина Диего Веласкеса «Менины» начинает казаться трехмерной.
![](https://habrastorage.org/files/a9d/75d/0d1/a9d75d0d18a54d32a1671669af4884ff.png)
В нижней части экрана представлен набор основных иконок Mac OS Х, которые при наведении увеличиваются. Эффект придает динамики сайту.
![](https://habrastorage.org/files/db7/c9e/314/db7c9e314c3b46d69dbdd1cc88f6dca3.png)
CSS3 эффекты и свойств Drop-In Modals помогут в создании быстрого, анимированного и простого изменения модальных окон.
![](https://habrastorage.org/files/a3b/b08/720/a3bb087206974ddcbb702feca9894ea1.png)
Трансформация изменяет внешний вид элемента в браузере. Показано на примере ракеты, которая «летит» из одного конца экрана в другой. Могут использоваться инструменты перемещения, вращения и т.д.
![](https://habrastorage.org/files/fde/b8e/a10/fdeb8ea100e0444ca3ea945d47a1d62c.png)
Цветные часы созданы на основе jQuery и CSS3. Подобный эффект придется кстати в контексте ожидания времени завершения какого-нибудь конкурса, голосования и тому подобного.
![](https://habrastorage.org/files/a44/948/fc3/a44948fc334d4caea1b75d2eec088e15.png)
Это замечательная галерея, которая позволяет сортировать и раскладывать изображения в выборочном порядке. Для интерактивности галерея использует JQuery, JQuery UI и JQuery плагин FancyBox. Lightbox поддерживает название и описание картинок, группирует их и автоматически выстраивает слайды в ряд.
![](https://habrastorage.org/files/4df/96a/fe1/4df96afe189040429da9f8ad04e97365.png)
Увеличение превью изображений при наведении. Таким образом при клике меню пропорционально увеличивается.
![](https://habrastorage.org/files/716/517/bf1/716517bf1c3a46199b481dc6ef0aaa25.png)
Этот пример представляет собой динамический набор карточек с использованием функций HTML и CSS3.
![](https://habrastorage.org/files/1e2/e09/3ae/1e2e093ae1114819a9f6bfb1b26914f1.png)
Выдвижное меню из примера создано комбинацией CSS3 и JQuery. При наведении на картинку появляется всплывающее окно с текстом.
![](https://habrastorage.org/files/ef5/87b/a4e/ef587ba4e05e44b1b8c10659b9274127.png)
В примере наведение курсора мыши на заголовки табов сопровождается сменой приведенного ниже списка.
![](https://habrastorage.org/files/67f/6ed/4b7/67f6ed4b73e34f6fbc596f9c06be42ac.png)
На примере продемонстрировано, как с помощью анимации CSS и SVG создать Fisheye меню. В качестве дополнительного бонуса используется демо-SVG в тэге IMG.
![](https://habrastorage.org/files/f20/c90/d7c/f20c90d7c9b84d8099680fd5660053d4.png)
Такой тип обеспечивает очень удобную навигацию по основному меню, благодаря использованию переходов CSS3.
![](https://habrastorage.org/files/bd6/a1a/1a9/bd6a1a1a9416471eb0c47d3a5d20d534.png)
Знаменитые титры из «Звездных войн». Для их запуска будет достаточно HTML и CSS.
![](https://habrastorage.org/files/64e/074/91c/64e07491cc61448abea91351b93c7c0c.png)
Опять таки, увеличивающиеся при наведении значки.
![](https://habrastorage.org/files/6cd/fb0/2ab/6cdfb02abb324a9794d7bd7c75f450c0.png)
Возможны несколько вариантов демонстрации.
В первом примере для обеспечения смены кадров необходимо кликать на изображение. Каждый клик — одно движение. Кадры повторяются, создается определенная зацикленность.
Во втором примере для смены кадров достаточно провести курсором по изображению. Соответственно и скорость анимации будет зависеть от быстроты движения мыши.
![](https://habrastorage.org/files/60b/33b/fa9/60b33bfa98cf418a8043e8886c0a53df.png)
И снова «Звездные войны» — этот движущийся шагоход AT-AT сделан с помощью CSS3.
![](https://habrastorage.org/files/4c6/071/32f/4c607132f7f0498a8d66d30d857f6b9e.png)
При клике на строку, таблица раскладывается.
![](https://habrastorage.org/files/222/102/c44/222102c444c647489e44840d8df7b7a0.png)
При наведении секции меняют цвет и выдвигаются.
![](https://habrastorage.org/files/2da/951/bdb/2da951bdb14d4b108c4d6cf7f9b7399c.jpg)
Показательная подборка разнообразных формаций эффектов. Достаточно кликнуть по клавишам «magic», «swap» и т.д. для демонстрации эффекта.
![](https://habrastorage.org/files/8bd/bda/d8b/8bdbdad8baf7443cb2e050ba00cf220a.png)
![](https://habrastorage.org/files/805/84e/74a/80584e74a85d4285a812b9b401d3bd8c.png)
Анимационный прогресс бар на CSS.
![](https://habrastorage.org/files/52e/320/ca7/52e320ca73e84ecf82b16da4869b7366.png)
В примере показано, как создать салют из кругов на JQuery и CSS.
![](https://habrastorage.org/files/d67/bdb/781/d67bdb7815d942048ff097b33d58b3b9.png)
На примере показано, каким образом можно создать анимированную кнопку on/off с помощью CSS.
![](https://habrastorage.org/files/9ed/2f6/e47/9ed2f6e47b054ee682e96e39a6bdf9e3.png)
Пример оригинальной разноцветной анимации загрузки на CSS.
![](https://habrastorage.org/files/c47/177/fb5/c47177fb5727447c9955fa89310abbaa.png)
40. Выпадающее меню
Еще один вариант простого и симпатичного выпадающего меню на CSS.
1. Часы CSS3 с jQuery
Эти часы созданы с использованием одного из основных инструментов CSS3 – rotate и с подключением библиотеки JQuery.
![](https://habrastorage.org/files/5ea/b92/1bd/5eab921bd90d423a81e730f652219f63.png)
2. Аналоговые часы CSS
Более классические, аналоговые часы. Они созданы с помощью webkit transition и свойства transform CSS. А вот для того, чтобы время соответствовало текущему, понадобиться JavaScript.
![](https://habrastorage.org/files/4df/5de/a01/4df5dea012124046b4e8a416a8ae7ac6.png)
3. Вращающийся 3D-куб
Вращение и перемещение по сторонам куба будет производиться стандартными клавишами «вверх», «вниз», «влево» и «вправо». Сама 3D-фигура построена с использованием webkit-perspective, -webkit-transform и -webkit-transition.
![](https://habrastorage.org/files/b86/379/632/b8637963258946049b669800e3aba16a.png)
4. Несколько выдвигающихся 3D-кубов
Здесь представлено уже несколько 3D-кубов, использующих CSS3 и непосредственно свойства transform и transition. Наведение курсора на куб заставляет его отъехать в сторону, открывая текст, который находиться на другой стороне фигуры.
![](https://habrastorage.org/files/dd5/f5d/93c/dd5f5d93c336458ea52a95e13173dcd6.png)
5. Accordion меню
Эффект «меню-гармошки» на чистом CSS, где клик по каждой из строк открывает дополнительное окно в теле самого списка. Собственная анимация в браузерах на базе WebKit.
![](https://habrastorage.org/files/f6c/0a8/839/f6c0a883996546919864d185762860f0.png)
6. Параллакс-скроллинг на CSS
Это анимированный автоматический параллакс-скроллинг с использованием CSS переходов на основе WebKit. При наведении на текстовое окно, звезды на фоне начинают плавно двигаться в сторону. Создается эффект полета.
![](https://habrastorage.org/files/064/dac/df6/064dacdf6ec34d6f8aeccb8c9dde41c2.png)
7. Матрица
Культовый фильм «Матрица» — одна из лучших фантастических кинокартин. На примере показано, как воссоздать примерно такую же удивительную анимацию (черный экран с бегущими цифрами) в CSS3.
![](https://habrastorage.org/files/81c/d7d/e66/81cd7de66ef64e89a9d728ea2edb95cd.jpg)
8. Динамичные Палароиды
В этом примере проводится подробное описание создания анимированных фотографий, основанной на командах CSS3. При клике на изображение, оно увеличивается и выдвигается на передний план.
![](https://habrastorage.org/files/d4e/b7b/fbd/d4eb7bfbd26c42e7ad60cb09c3177ef5.png)
9. Масштабирование изображений
В этом примере картинки просто увеличиваются при наведении. Незамысловатый, но порой весьма полезный эффект.
![](https://habrastorage.org/files/cb5/273/b5f/cb5273b5f9fd4e1faeee6d6757896c44.png)
10. Эффекты JavaScript на CSS3
В качестве альтернативы JavaScript, в посте предложено семь эффектов на CSS3: различные блоки, которые вращаются, исчезают, выезжают, увеличиваются и т.д.
![](https://habrastorage.org/files/91f/73c/d64/91f73cd6467145ca90a087d6df74bceb.png)
11. Виртуальные пластинки DJ Hero
В посте рассказывается, как создать крутящиеся пластинки. Скорость вращения можно регулировать прямо на экране.
![](https://habrastorage.org/files/437/0db/7b7/4370db7b78744dcc9ff8daae763f54cd.png)
12. Скользящий винил
Эффект скольжения виниловых пластинок создается с помощью переходов CSS3 и HTML. Подобная анимация оживляет веб-страницу, добавляет оригинальности стандартной обложке альбома и т.д.
![](https://habrastorage.org/files/6c2/2d3/fc6/6c22d3fc61c94a8b80c660a77558c458.png)
13. Эффекты при наведении на картинку
При наведении курсора на изображение, оно может сместиться в сторону, завертеться, уменьшиться, из квадратного преобразоваться в круглое, стать размытым… Словом, картинки будут всячески менять свои свойства.
![](https://habrastorage.org/files/c49/59d/e7a/c4959de7aac74e1b965f90eda0268c3b.png)
14. Вращающийся треугольник
При нажатии на треугольник, он начинает вращаться.
![](https://habrastorage.org/files/f8e/824/a61/f8e824a6169e43f8acbfab3a2ce8b6ae.png)
15. Космос
Целое космическое пространство, умещенное в CSS. Выступает примером наложения вращающихся слоев (более заметно при уменьшении масштаба изображения в браузере).
![](https://habrastorage.org/files/137/987/c23/137987c2354045d19082af673030ccf5.png)
16. «Менины» в 3D
Интересный эффект CSS, с помощью которого известная картина Диего Веласкеса «Менины» начинает казаться трехмерной.
![](https://habrastorage.org/files/a9d/75d/0d1/a9d75d0d18a54d32a1671669af4884ff.png)
17. CSS для Mac OS Х
В нижней части экрана представлен набор основных иконок Mac OS Х, которые при наведении увеличиваются. Эффект придает динамики сайту.
![](https://habrastorage.org/files/db7/c9e/314/db7c9e314c3b46d69dbdd1cc88f6dca3.png)
18. Drop-In Modals
CSS3 эффекты и свойств Drop-In Modals помогут в создании быстрого, анимированного и простого изменения модальных окон.
![](https://habrastorage.org/files/a3b/b08/720/a3bb087206974ddcbb702feca9894ea1.png)
19. Анимирование объектов
Трансформация изменяет внешний вид элемента в браузере. Показано на примере ракеты, которая «летит» из одного конца экрана в другой. Могут использоваться инструменты перемещения, вращения и т.д.
![](https://habrastorage.org/files/fde/b8e/a10/fdeb8ea100e0444ca3ea945d47a1d62c.png)
20. Цветные часы
Цветные часы созданы на основе jQuery и CSS3. Подобный эффект придется кстати в контексте ожидания времени завершения какого-нибудь конкурса, голосования и тому подобного.
![](https://habrastorage.org/files/a44/948/fc3/a44948fc334d4caea1b75d2eec088e15.png)
21. Гелерея Lightbox на jQuery и CSS3
Это замечательная галерея, которая позволяет сортировать и раскладывать изображения в выборочном порядке. Для интерактивности галерея использует JQuery, JQuery UI и JQuery плагин FancyBox. Lightbox поддерживает название и описание картинок, группирует их и автоматически выстраивает слайды в ряд.
![](https://habrastorage.org/files/4df/96a/fe1/4df96afe189040429da9f8ad04e97365.png)
22. «Эластичные» превью
Увеличение превью изображений при наведении. Таким образом при клике меню пропорционально увеличивается.
![](https://habrastorage.org/files/716/517/bf1/716517bf1c3a46199b481dc6ef0aaa25.png)
23. Динамичные карточки
Этот пример представляет собой динамический набор карточек с использованием функций HTML и CSS3.
![](https://habrastorage.org/files/1e2/e09/3ae/1e2e093ae1114819a9f6bfb1b26914f1.png)
24. Выдвижное JQuery меню
Выдвижное меню из примера создано комбинацией CSS3 и JQuery. При наведении на картинку появляется всплывающее окно с текстом.
![](https://habrastorage.org/files/ef5/87b/a4e/ef587ba4e05e44b1b8c10659b9274127.png)
25. Табы CSS
В примере наведение курсора мыши на заголовки табов сопровождается сменой приведенного ниже списка.
![](https://habrastorage.org/files/67f/6ed/4b7/67f6ed4b73e34f6fbc596f9c06be42ac.png)
26. Fisheye меню
На примере продемонстрировано, как с помощью анимации CSS и SVG создать Fisheye меню. В качестве дополнительного бонуса используется демо-SVG в тэге IMG.
![](https://habrastorage.org/files/f20/c90/d7c/f20c90d7c9b84d8099680fd5660053d4.png)
27. Выпадающее меню
Такой тип обеспечивает очень удобную навигацию по основному меню, благодаря использованию переходов CSS3.
![](https://habrastorage.org/files/bd6/a1a/1a9/bd6a1a1a9416471eb0c47d3a5d20d534.png)
28. Титры из «Звездных войн»
Знаменитые титры из «Звездных войн». Для их запуска будет достаточно HTML и CSS.
![](https://habrastorage.org/files/64e/074/91c/64e07491cc61448abea91351b93c7c0c.png)
29. Еще эффекты Fisheye на CSS
Опять таки, увеличивающиеся при наведении значки.
![](https://habrastorage.org/files/6cd/fb0/2ab/6cdfb02abb324a9794d7bd7c75f450c0.png)
30. Анимация по типу «кадр за кадром»
Возможны несколько вариантов демонстрации.
В первом примере для обеспечения смены кадров необходимо кликать на изображение. Каждый клик — одно движение. Кадры повторяются, создается определенная зацикленность.
Во втором примере для смены кадров достаточно провести курсором по изображению. Соответственно и скорость анимации будет зависеть от быстроты движения мыши.
![](https://habrastorage.org/files/60b/33b/fa9/60b33bfa98cf418a8043e8886c0a53df.png)
31. Имперский шагоход AT-AT
И снова «Звездные войны» — этот движущийся шагоход AT-AT сделан с помощью CSS3.
![](https://habrastorage.org/files/4c6/071/32f/4c607132f7f0498a8d66d30d857f6b9e.png)
32. Еще одна «гармошка» CSS
При клике на строку, таблица раскладывается.
![](https://habrastorage.org/files/222/102/c44/222102c444c647489e44840d8df7b7a0.png)
33. Простое выдвижное меню
При наведении секции меняют цвет и выдвигаются.
![](https://habrastorage.org/files/2da/951/bdb/2da951bdb14d4b108c4d6cf7f9b7399c.jpg)
34. Магические анимационные эффекты в CSS
Показательная подборка разнообразных формаций эффектов. Достаточно кликнуть по клавишам «magic», «swap» и т.д. для демонстрации эффекта.
![](https://habrastorage.org/files/8bd/bda/d8b/8bdbdad8baf7443cb2e050ba00cf220a.png)
35. Меню из закладок
![](https://habrastorage.org/files/805/84e/74a/80584e74a85d4285a812b9b401d3bd8c.png)
36. Прогресс бар
Анимационный прогресс бар на CSS.
![](https://habrastorage.org/files/52e/320/ca7/52e320ca73e84ecf82b16da4869b7366.png)
37. Салют CSS
В примере показано, как создать салют из кругов на JQuery и CSS.
![](https://habrastorage.org/files/d67/bdb/781/d67bdb7815d942048ff097b33d58b3b9.png)
38. Включатель/выключатель
На примере показано, каким образом можно создать анимированную кнопку on/off с помощью CSS.
![](https://habrastorage.org/files/9ed/2f6/e47/9ed2f6e47b054ee682e96e39a6bdf9e3.png)
39. Цветная загрузка
Пример оригинальной разноцветной анимации загрузки на CSS.
![](https://habrastorage.org/files/c47/177/fb5/c47177fb5727447c9955fa89310abbaa.png)
40. Выпадающее меню
Еще один вариант простого и симпатичного выпадающего меню на CSS.
![](https://habrastorage.org/files/6cf/d1e/5c5/6cfd1e5c53bf4a25ab9076e4962ead53.png)
Комментарии (10)
Denai
27.04.2016 15:10+217. CSS для Mac OS Х — всё прописано через -webkit, в других браузерах не будет работать.
26. Fisheye меню — демо вообще не работает
Sild
27.04.2016 17:18Что с совместимостью? Не тыкал примеры, но название свойств намекают на сильную зависимость от движка.
BordiArt
27.04.2016 18:1040. Выпадающее меню
Еще один вариант простого и симпатичного выпадающего меню на CSS.
Мне кажется это самая стандартная/простая форма выпадающего меню. Или что имелось ввиду?
PaulZi
28.04.2016 10:30+1Вот такие статьи превращают хабр в блог-помойку. Подборка ни о чём, некоторые примеры годятся для caniuse как пример демонстрации свойства.
Fen1kz
А чем полезны "Часы на CSS3 с jQuery"?
Вы в курсе, что jQuery — это библиотека javascript?
Вы вообще читали этот пост или просто копирнули что-то для пиара?
Elena_sm
Да, в курсе. Перечитайте пожалуйста выделенное предложение, оно и означает, что иногда можно не прибегать к JavaScript.
Кому-то могут пригодиться для работы.