Еженедельная подборка красивых эффектов на CSS/SVG/JS #72 — CSS-LIVE
Подборка свежих эффектов, интересных идей и полезных наработок.
CSS-иллюстрация «Спортсменка»
По клику на кнопки «Run» и «Walk» девушка переходит на бег или ходьбу.
Нижние кнопки управления меняют среду и образ девушки, а ползунком можно управлять скоростью движения.
Эффектнее смотрится в полностраничном режиме.
Технологии: CSS, CSS-переменные, CSS-анимация, CSS-трансформации.
Автор: White Pallet (@WhitePallet)
Посмотреть живой пример
Имитация экрана
Автор демонстрирует, как CSS-функция matrix3d() может применяться с целью имитации экрана.
Технологии: CSS-функция matrix3d(), CSS-трансформации, iframe.
Автор: Джордж В. Парк (@GeorgePark)
Посмотреть живой пример
Анимация статуса
Кнопки управляют анимацией: «Пассивный», «Ожидает», «Размышляет», «Вводит текст», «Фигачит по клавиатуре».
Технологии: SVG, CSS-трансформации, CSS-анимация, React.js.
Автор: Бард Н. Ховде (@bnhovde)
Посмотреть живой пример
Многоуровневое боковое меню
Меню выдвигается при наведении на одну из иконок слева.
Автор: Аарон Авад (@blindpiggy)
Посмотреть живой пример
Медведь на мопеде
Технологии: CSS, Create.js.
Автор: Камерон Фицвиллиам (@CameronFitzwilliam)
Посмотреть живой пример
Трехмерный мишка
Кликом и удерживанием курсора можно «крутить» мишку.
Технологии: CSS.
Автор: Дэйв ДеСандро (@desandro)
Посмотреть живой пример
Генератор лиц
Лица генерируются заново по клику в любом месте.
Технологии: canvas, JS.
Автор: Жерар Феррандес (@ge1doot)
Посмотреть живой пример
Бесконечная стопка бумаг
Стопка генерируется заново по клику в любом месте.
Технологии: canvas, JS.
Автор: Жерар Феррандес (@ge1doot)
Посмотреть живой пример
Хамелеон
Хамелеон меняет свой окрас по клику на листик другого цвета.
Технологии: CSS-переменные, JS, Lottie-web.
Автор: kittons (@airnan)
Посмотреть живой пример
Варианты стилизации кнопок при наведении
Технологии: CSS.
Автор: Параскевас Нтинакис (@perry_nt)
Посмотреть живой пример
Эффекты волны при клике на кнопку
Технологии: CSS-переменные, CSS-трансформации, JS.Автор: jakob-e (@jakob-e)
Посмотреть живой пример
Меню действий на CSS
Технологии: CSS.
Автор: Рафаэль Л. Перейра (@rafarlp)
Посмотреть живой пример
Трактор
Технологии: SVG, CSS-переменные, CSS-трансформации, JS.
Автор: Mandax (@mandax)
Посмотреть живой пример
Флажки с текстом на ветру
Технологии: SVG, CSS-переменные, CSS-трансформации, JS.
Автор: Дэн Уилсон (@danwilson)
Посмотреть живой пример
Пожелания и идеи по содержанию следующих выпусков приветствуем в комментариях.
P.S. Это тоже может быть интересно:
- Canvas, CSS, CSS3, HTML, JavaScript, JSS, SVG, анимация
Последние новости
Последние новости
Последние комментарии
Последние комментарии
Поддержите проект
Бесплатная подборка из 40 эффектов CSS / Хабр
В посте собрана подборка различных эффектов и анимации CSS, которые могут пригодиться в работе, а кроме того избавят от необходимости постоянно прибегать к JavaScript. Возможно примеры не самые новые и необычные, но на мой взгляд, полезные.1. Часы CSS3 с jQuery
Эти часы созданы с использованием одного из основных инструментов CSS3 – rotate и с подключением библиотеки JQuery.
2. Аналоговые часы CSS
Более классические, аналоговые часы. Они созданы с помощью webkit transition и свойства transform CSS. А вот для того, чтобы время соответствовало текущему, понадобиться JavaScript.3. Вращающийся 3D-куб
Вращение и перемещение по сторонам куба будет производиться стандартными клавишами «вверх», «вниз», «влево» и «вправо». Сама 3D-фигура построена с использованием webkit-perspective, -webkit-transform и -webkit-transition.4. Несколько выдвигающихся 3D-кубов
Здесь представлено уже несколько 3D-кубов, использующих CSS3 и непосредственно свойства transform и transition. Наведение курсора на куб заставляет его отъехать в сторону, открывая текст, который находиться на другой стороне фигуры.5. Accordion меню
Эффект «меню-гармошки» на чистом CSS, где клик по каждой из строк открывает дополнительное окно в теле самого списка. Собственная анимация в браузерах на базе WebKit.6.
Параллакс-скроллинг на CSS
Это анимированный автоматический параллакс-скроллинг с использованием CSS переходов на основе WebKit. При наведении на текстовое окно, звезды на фоне начинают плавно двигаться в сторону. Создается эффект полета.7. Матрица
Культовый фильм «Матрица» — одна из лучших фантастических кинокартин. На примере показано, как воссоздать примерно такую же удивительную анимацию (черный экран с бегущими цифрами) в CSS3.8. Динамичные Палароиды
В этом примере проводится подробное описание создания анимированных фотографий, основанной на командах CSS3. При клике на изображение, оно увеличивается и выдвигается на передний план.9. Масштабирование изображений
В этом примере картинки просто увеличиваются при наведении. Незамысловатый, но порой весьма полезный эффект.10. Эффекты JavaScript на CSS3
В качестве альтернативы JavaScript, в посте предложено семь эффектов на CSS3: различные блоки, которые вращаются, исчезают, выезжают, увеличиваются и т.
д.11. Виртуальные пластинки DJ Hero
В посте рассказывается, как создать крутящиеся пластинки. Скорость вращения можно регулировать прямо на экране.12. Скользящий винил
Эффект скольжения виниловых пластинок создается с помощью переходов CSS3 и HTML. Подобная анимация оживляет веб-страницу, добавляет оригинальности стандартной обложке альбома и т.д.13. Эффекты при наведении на картинку
При наведении курсора на изображение, оно может сместиться в сторону, завертеться, уменьшиться, из квадратного преобразоваться в круглое, стать размытым… Словом, картинки будут всячески менять свои свойства.14. Вращающийся треугольник
При нажатии на треугольник, он начинает вращаться.15. Космос
Целое космическое пространство, умещенное в CSS. Выступает примером наложения вращающихся слоев (более заметно при уменьшении масштаба изображения в браузере).16. «Менины» в 3D
Интересный эффект CSS, с помощью которого известная картина Диего Веласкеса «Менины» начинает казаться трехмерной.
17. CSS для Mac OS Х
В нижней части экрана представлен набор основных иконок Mac OS Х, которые при наведении увеличиваются. Эффект придает динамики сайту.18. Drop-In Modals
CSS3 эффекты и свойств Drop-In Modals помогут в создании быстрого, анимированного и простого изменения модальных окон.19. Анимирование объектов
Трансформация изменяет внешний вид элемента в браузере. Показано на примере ракеты, которая «летит» из одного конца экрана в другой. Могут использоваться инструменты перемещения, вращения и т.д.20. Цветные часы
Цветные часы созданы на основе jQuery и CSS3. Подобный эффект придется кстати в контексте ожидания времени завершения какого-нибудь конкурса, голосования и тому подобного.21. Гелерея Lightbox на jQuery и CSS3
Это замечательная галерея, которая позволяет сортировать и раскладывать изображения в выборочном порядке. Для интерактивности галерея использует JQuery, JQuery UI и JQuery плагин FancyBox.
Lightbox поддерживает название и описание картинок, группирует их и автоматически выстраивает слайды в ряд.22. «Эластичные» превью
Увеличение превью изображений при наведении. Таким образом при клике меню пропорционально увеличивается.23. Динамичные карточки
Этот пример представляет собой динамический набор карточек с использованием функций HTML и CSS3.24. Выдвижное JQuery меню
Выдвижное меню из примера создано комбинацией CSS3 и JQuery. При наведении на картинку появляется всплывающее окно с текстом.25. Табы CSS
В примере наведение курсора мыши на заголовки табов сопровождается сменой приведенного ниже списка.26. Fisheye меню
На примере продемонстрировано, как с помощью анимации CSS и SVG создать Fisheye меню. В качестве дополнительного бонуса используется демо-SVG в тэге IMG.27. Выпадающее меню
Такой тип обеспечивает очень удобную навигацию по основному меню, благодаря использованию переходов CSS3.
28. Титры из «Звездных войн»
Знаменитые титры из «Звездных войн». Для их запуска будет достаточно HTML и CSS.29. Еще эффекты Fisheye на CSS
Опять таки, увеличивающиеся при наведении значки.30. Анимация по типу «кадр за кадром»
Возможны несколько вариантов демонстрации.В первом примере для обеспечения смены кадров необходимо кликать на изображение. Каждый клик — одно движение. Кадры повторяются, создается определенная зацикленность.
Во втором примере для смены кадров достаточно провести курсором по изображению. Соответственно и скорость анимации будет зависеть от быстроты движения мыши.
31. Имперский шагоход AT-AT
И снова «Звездные войны» — этот движущийся шагоход AT-AT сделан с помощью CSS3.32. Еще одна «гармошка» CSS
При клике на строку, таблица раскладывается.33. Простое выдвижное меню
При наведении секции меняют цвет и выдвигаются.
34. Магические анимационные эффекты в CSS
Показательная подборка разнообразных формаций эффектов. Достаточно кликнуть по клавишам «magic», «swap» и т.д. для демонстрации эффекта.35. Меню из закладок
36. Прогресс бар
Анимационный прогресс бар на CSS.37. Салют CSS
В примере показано, как создать салют из кругов на JQuery и CSS.38. Включатель/выключатель
На примере показано, каким образом можно создать анимированную кнопку on/off с помощью CSS.39. Цветная загрузка
Пример оригинальной разноцветной анимации загрузки на CSS.40. Выпадающее меню
Еще один вариант простого и симпатичного выпадающего меню на CSS.
30 классных CSS-анимаций для вашего вдохновения
CSS — один из самых универсальных популярных языков программирования. От макетов и текстовых эффектов до цвета и размера вашего контента — возможности безграничны.
Одним из самых интересных применений CSS является создание анимации. И об этом весь этот пост.
В этом посте перечислены некоторые из самых креативных анимаций CSS, которые вы найдете в Интернете. От эффектов перехода до анимации персонажей — здесь вы найдете несколько действительно крутых примеров, которые вы можете либо использовать непосредственно в своем проекте, либо черпать из них вдохновение. Итак, смотрите и выбирайте понравившуюся.
10 инструментов анимации CSS3, которые вы должны добавить в закладки10 инструменты анимации CSS3, которые вы должны добавить в закладки
Поскольку людям легче воспринимать движущиеся предметы, разумно используемые анимации могут улучшить взаимодействие с пользователем… Подробнее
Анимация загрузки CSS
Создатель: patrikhjelm
Семь анимированных точек смещаются влево и вправо, обозначая действие загрузки.
Анимированная иконка корзины
Создатель: jonitrythall
Симпатичные анимированные эффекты добавления продуктов в корзину.
Прокрутите вниз, чтобы узнать больше.
Гамбургер Только анимация CSS3
Создатель: Давид Краевски
Создан на чистом CSS, без JS или чего-то еще.
404 анимированный персонаж
Создатель: With An Es
По крайней мере, над этой страницей ошибки работает разработчик. Даже если это 404.
CSS Mars Landing
Создатель: mgitch
Мы приземлились на Марсе! Сделано с помощью CSS.
Мститель
Создатель: Мариосмаселли
Вы слышите, как на экране трясется гнев Халка? Круто, правда?
Переключение день/ночь
Создатель: jsndks
Теперь вы можете переключать день и ночь с помощью CSS. Гениальная идея!
Стороннее приложение Google Now
Создатель: codecalm
Сторонние приложения Google Now, анимированные.
Clo clo
Создатель: judag
Петух так двигается? Вы держите пари, что это так, в комплекте с джигги-шеей. Отличная практика CSS3.
Другой загрузчик CSS
Создатель: Maseone
Потрясающая анимация ритмичной загрузки CSS.
Гипнотический, не так ли?
Кнопка «Отправить»
Создатель: auginator
Нажмите, чтобы отправить, и кнопка анимирует процесс загрузки до завершения отправки!
Дизайн материалов эластичной боковой панели SVG
Создатель: suez
Перетащите белую полосу вправо, чтобы увидеть эффект эластичной боковой панели.
Кнопка Particle
Создатель: igcorreia
Делайте то, что говорит кнопка: наведите курсор мыши, чтобы удивиться.
Липкая пуговица
Создатель: Лукас Беббер
Щелкните, чтобы включить эффект липкости. Вы получите его, как только увидите, и нажмете на него еще несколько раз. Амирит?
Перевернутая кнопка
Создатель: hakimel
Нажмите на любую сторону кнопки «Удалить», и кнопка перевернется в зависимости от того, куда вы нажали.
Настоящее гамбургер-меню!
Создатель: CharlesSmart
Действительно вкусное меню гамбургеров. Нажмите на гамбургер, чтобы увидеть эффекты
Круиз
Создатель: yy
Смотрите, мотоцикл едет.
Трехмерная кубическая волна
Создатель: waddington
Святые трехмерные кубики!
Анимация подписи
Создатель: drygiel
Вот подпись, которая на самом деле не GIF-анимация, а последовательность PNG, анимированная с помощью CSS3.
Анимация фонового градиента
Создатель: quadrimondo
Этот трюк изменяет фоновый градиент от одного цвета к другому в плавной непрерывной форме.
Значок переключения звездных войн
Создатель: rss
Гамбургер-меню в бою превращается в световые мечи (крест).
Анимация в стиле GIF
Создатель: jascha
Посмотрите, как фото материализуется из пиксель-арта.
Анимация ввода/вывода фокуса
Создатель: fluxus
Маленькая анимированная ручка пишет поверх формы, которую вы заполняете.
Хроматический треугольник
Создатель: felipedefarias CSS3 .
Кофеварка
Создатель: thisisroger
Напоминаем, что вам нужно выпить дневную дозу кофе.
Как будто он тебе нужен.
Chrome Dinosaur
Создатель: nickspiel
Не можете открыть нужную страницу из-за разрыва соединения? Вот динозавр, которого вы всегда видите, когда это происходит, только на этот раз он убегает от метеорита!
Встряхивание CSS
Создатель: elrumordelaluz
Наведите указатель мыши на каждый эффект, чтобы увидеть, как дрожит малыш.
Колыбель Ньютона Загрузчик
Создатель: All Things Smitty
Если вы знаете физику, вы, конечно, знаете колыбель Ньютона, но, вероятно, не так.
Запустить модальное окно
Создатель: koolhaus
Нажмите, чтобы увидеть красивую и плавную анимацию модального окна.
Шагающий робот
Создатель: P233
Этот робот продолжает ходить, ходить и ходить вокруг оси Y.
Гибкие стрелки разбиения на страницы
Создатель: Хаким
От первой до последней страницы эта анимация разбиения на страницы ясно показывает, как вы продвигаетесь по страницам.
Вот еще:
Анимированная 3D-спираль
Первая в списке — невероятная анимация, созданная Marcofolio.net с использованием 3D-преобразований CSS3. Сама анимация выглядит как волшебство, но вы действительно можете научиться создавать подобный эффект с помощью урока в статье!
Кнопки с анимацией
Обязательно к просмотру веб-дизайнерам, так как демонстрация не только демонстрирует возможности CSS3-анимации, но и предлагает очень классные и практичные эффекты кнопок для вдохновения!
Анимационные меню
Пытаетесь оживить свои анимационные меню, чтобы они выглядели действительно круто и креативно? Эта демонстрация для вас.
Большое дело
Плавная и приятная анимация сделала эту демонстрацию большой удачей.
Человек CSS3
Осторожно, идет человек CSS3! Прекрасный пример, демонстрирующий истинный потенциал CSS3-анимации.
Dribbble Ball Bouncing
С небольшим использованием графических трюков получается красивая и забавная анимация CSS3.
Покадровая анимация
Покадровая анимация с помощью CSS3? Без проблем!
Анимация графика
Простая, но мощная анимация для отображения/объяснения графика на вашем сайте. Научитесь делать это!
Hover Effects
Будущее эффекта наведения заложено в CSS3. Лаконичный и многообещающий.
Бесконечный зум
Плавная анимация; это также хороший способ показать свое портфолио. Общий масштаб для 26 изображений составляет 6 710 8864:1.
Kinect и CSS3
«14 суставов тела отслеживаются и преобразуются в короткую анимацию CSS с помощью Xbox Kinect. Данные тела передаются в браузер, где они анализируются и преобразуются в анимацию CSS с помощью Animatable.com».
Матрица
Хотите быть таким же крутым, как Матрица? С CSS3 вы можете это сделать.
Кубы морфинга
Экспериментальная демонстрация изучения CSS3 с использованием 3D-преобразований, анимации и переходов. Самое интересное здесь то, что вы все еще можете выбирать текст на элементах, даже когда они все еще вращаются.
Наша солнечная система
Вам больше не нужно дорогое отдельное программное обеспечение, чтобы помочь студентам исследовать солнечные системы.
Duff Roll
«Ммммммм… Гомеру бы понравился бесконечный запас пива».
Poster Circle
Простой, но интересный пример, показывающий, как использовать преобразование CSS и анимацию для достижения интересного эффекта.
Star Wars Crawl
Эффект ползания открытия Star Wars! Такой же эпичный, как CSS3.
Типографские эффекты
Помимо кнопок, меню и эффектов наведения, вы также можете создавать творческие эффекты типографики с помощью CSS3. jQuery также участвует в этой демонстрации для стилизации букв слов.
Прогулка с Эндрю Хойером
Лучше всего, вы также можете научиться ходить с Эндрю Хойером в статье!
Wonder Webkit
Прекрасное использование 3D-преобразований CSS3 с библиотекой JavaScript Matrix. Звучит технично, но результат потрясающий.
Зоотроп
Что еще вы не можете сделать с CSS3, когда с ним возможен Zoetrope?
Подробнее:
Вот другие статьи по теме, которые могут вас заинтересовать:
- Руководство для начинающих по CSS3
- Создание потрясающего окна поиска CSS3
- Создание веб-страниц HTML5/CSS3
- Изящное меню навигации в виде цепочек в CSS3
- Создание контактной формы HTML5/CSS3 на основе Ajax
- 35 Графика, созданная исключительно с помощью CSS3
- подробнее..
8 фрагментов CSS и JavaScript для создания красивых эффектов боке
Боке уже давно является популярным фотографическим стилем. Проще говоря, он имеет основной фокус на объекте и слегка размытый фон. Техника красивая и верный способ привлечь внимание пользователя.
Но что, если вы хотите реализовать эстетику боке без фотографии? Для этого есть несколько уникальных методов.
Веб-дизайнеры используют CSS и JavaScript для создания всевозможных эффектов боке.
Вы найдете знакомые размытые блики на фотографиях. Но есть также добавление движения, генеративный пользовательский интерфейс и множество используемых художественных лицензий.
Вот восемь примеров эффектов боке, созданных с помощью кода. На поверхности могут быть некоторые сходства. Но присмотритесь, и вы также обнаружите, насколько подробны эти презентации. Давайте начнем!
Дополнительные фрагменты CSS-эффектов
Bokeh Lighting Background
by Wakana Y.K.В фотографии боке часто добавляет глубину изображению. Этот фрагмент выводит концепцию на совершенно другой уровень. Three.js используется для добавления красивой 3D-анимации. Кроме того, пользователи могут перетаскивать фон, чтобы изменить перспективу.
См. Фон освещения Pen Bokeh от Wakana Y.K.
Боке CSS Doodle
от Crystal S Сочетание CSS Grid, анимации и фильтров оживляет эту презентацию.
Движение заметно, не отвлекая внимания. Это делает его хорошим решением для главной области или даже фона страницы. Щелчок по холсту создает новую сцену с помощью JavaScript.
See the Pen Bokeh CSS Doodle by Crystal S
Анимированная лавовая лампа с эффектом боке Canvas
от smpnjnЭтот пример боке сочетает в себе эффект с липким блеском лавовой лампы. Пузырьковые блики то исчезают, то исчезают, а движение остается безмятежным. Результатом является сцена, которая создает успокаивающую атмосферу.
See the Pen Animated Bokeh Lava Lamp Canvas от smpnjn
Hex Bokeh Effect
от Will Boyd Вот совершенно другой взгляд на боке. Во-первых, вы заметите статичный фон с шестиугольниками. Но начните прокручивать, и вы обнаружите рассеянный эффект параллакса.
Фрагмент также использует умный генеративный пользовательский интерфейс для создания новой сцены при каждом обновлении страницы.
См. Pen Hex Bokeh от Will Boyd
Bokehlicious с CSS
от Andy FitzsimonЕсли вы ищете тонкую красоту, этот фрагмент отвечает всем требованиям. Верный форме, он подчеркивает текст переднего плана. Тем временем на заднем плане тихо движутся разноцветные капли. Сочетание SVG и CSS добавляет атмосферности.
См. Pen bokehlicious от Andy Fitzsimon
Canvas Bokeh Effect
от Aaron Silber Вы могли заметить, что большинство примеров, которыми мы поделились, имеют темную цветовую схему. Но это доказательство того, что яркая палитра также может быть неотразимой. Еще раз, тонкость правит, поскольку точки плавно исчезают и исчезают.
Ничего особенного — но в этом суть.
См. Эффект боке Pen Canvas от Aaron Silber
Снежный боке
от Preetesh JainЭтот снежный фрагмент может передать множество эмоций — от сезонных до нуарных. Черно-белая цветовая схема также обеспечивает другой взгляд на эстетику. Наибольшая концентрация белого находится внизу, но трудно не сфокусироваться на более темных точках, спускающихся сверху.
See the Pen Snowing Bokeh от Preetesh Jain
Refreshing CSS Bokeh Effect
Nayra Rodrguez Есть ли в вашем проекте гибкость в выборе цвета? Тогда этот фрагмент стоит проверить. Каждый щелчок или обновление рисует новую сцену, включая цветовую палитру. Медленно движущиеся сферы и приглушенные тона не будут отвлекать от вашего контента.
See the Pen Untitled от Nayra Rodrguez
Придайте фокус боке с помощью кода
Внедрение эффектов боке — верный способ добавить немного художественного чутья на ваш веб-сайт. Фрагменты выше демонстрируют множество потенциальных применений. Вы можете создать что угодно, от тонкого фона до чего-то большого и смелого.
Более того, CSS и JavaScript допускают почти бесконечную настройку. Цвета, интенсивность и скорость движения — это лишь некоторые из элементов, которые можно настроить. Оттуда вы можете создать презентацию, которая соответствует общей эстетике вашей страницы.
Надеемся, эта сводка новостей вас вдохновила! Если вы хотите увидеть еще больше примеров боке в действии, ознакомьтесь с нашей коллекцией CodePen.
Эта страница может содержать партнерские ссылки. Без каких-либо дополнительных затрат для вас мы можем получать комиссию с любой покупки по ссылкам на нашем сайте.
