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

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

Анимация про дизайнеров на CSS

Технологии: CSS-анимация.
Автор: Юлия Музафарова (@miocene)

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


Лошадь в движении Эдварда Мейбридж

Технологии: CSS-анимация, вариативный шрифт.
Автор: Лоуренс Пенни (@lorp)

Лошадь в движении Эдварда Мейбридж Посмотреть живой пример


Головоломка «Ханойская башня»

Цель — переместить все диски с левой «башни» на правую. За один раз можно перемещать только один диск. При этом больший диск нельзя помещать на меньший.
Технологии: CSS.
Автор: Бенс Сабо (@finnhvman)

Головоломка Ханойская башня Посмотреть живой пример


Выбор любимого времени дня

Внизу, под окном можно выбрать время дня.
Технологии: SVG, CSS, JS.
Автор: Оливия (@oliviale)

Выбор любимого времени дня Посмотреть живой пример


SVG-переключалка между табами

Технологии: SVG, CSS, JS.
Автор: Микаэль Айналем (@ainalem)

SVG-переключалка между табами Посмотреть живой пример


Прокрутка, «растягивающая» изображения

Технологии: CSS, JS.
Автор: Натан Тейлор (@nathantaylor)

Прокрутка, растягивающая изображения Посмотреть живой пример


Интерактивная SVG-маска

Наведением курсора вы «раскрашиваете» кусочек комнаты. Удерживая его, вы распространяете эффект дальше в стороны.
Технологии: SVG-маска, JS.
Автор: Крейг Роблевский (@PointC)

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


День и ночь

Технологии: CSS-переменные, JS.
Автор: Камерон Фицвиллиам (@CameronFitzwilliam)

День и ночь Посмотреть живой пример


Иллюстрация гипотезы Коллатца

Технологии: canvas, JS.
Автор: ninivert (@ninivert)

Иллюстрация гипотезы Коллатца Посмотреть живой пример


Текст, переходящий через угол

Технологии: CSS, CSS-анимация.
Автор: 张偶 (@zhang-ou)

Текст, переходящий через угол Посмотреть живой пример


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

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

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

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

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

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