Еженедельная подборка красивых эффектов на CSS/SVG/JS #72

Подборка свежих эффектов, интересных идей и полезных наработок.

CSS-иллюстрация «Спортсменка»

По клику на кнопки «Run» и «Walk» девушка переходит на бег или ходьбу.
Нижние кнопки управления меняют среду и образ девушки, а ползунком можно управлять скоростью движения.
Эффектнее смотрится в полностраничном режиме.
Технологии: CSS, CSS-переменные, CSS-анимация, CSS-трансформации.
Автор: White Pallet (@WhitePallet)

CSS-иллюстрация Спортсменка Посмотреть живой пример


Имитация экрана

Автор демонстрирует, как CSS-функция matrix3d() может применяться с целью имитации экрана.
Технологии: CSS-функция matrix3d(), CSS-трансформации, iframe.
Автор: Джордж В. Парк (@GeorgePark)

Имитация экрана Посмотреть живой пример


Анимация статуса

Кнопки управляют анимацией: «Пассивный», «Ожидает», «Размышляет», «Вводит текст», «Фигачит по клавиатуре».
Технологии: SVG, CSS-трансформации, CSS-анимация, React.js.
Автор: Бард Н. Ховде (@bnhovde)

Анимация статуса Посмотреть живой пример


Многоуровневое боковое меню

Меню выдвигается при наведении на одну из иконок слева.
Технологии: CSS, CSS-трансформации, JS, jQuery.js.
Автор: Аарон Авад (@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)

Меню действий на CSS Посмотреть живой пример


Трактор

Технологии: SVG, CSS-переменные, CSS-трансформации, JS.
Автор: Mandax (@mandax)

Трактор Посмотреть живой пример


Флажки с текстом на ветру

Технологии: SVG, CSS-переменные, CSS-трансформации, JS.
Автор: Дэн Уилсон (@danwilson)

Флажки с текстом на ветру Посмотреть живой пример


Пожелания и идеи по содержанию следующих выпусков приветствуем в комментариях.

P.S. Это тоже может быть интересно:

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Ваш E-mail не будет опубликован

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.