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

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

Постер к фильму «Соло: Звездные войны»

Внизу можно выбирать персонажа для фона и менять текст.
Технологии: CSS, React.
Автор: Морис Мелчерс (@mephysto)

Постер к фильму Соло: Звездные войны Посмотреть живой пример


Кнопка включения-выключения в стиле Sci-Fi

Технологии: SVG, React, GSAP.
Автор: Крис Ганнон (@chrisgannon)

Кнопка включения-выключения в стиле Sci-Fi Посмотреть живой пример


Имитация трехмерного интерфейса

Анимация при наведении курсора.
Технологии: CSS, JS.
Автор: Горан Врбан (@gvrban)

Имитация трехмерного интерфейса Посмотреть живой пример


Красивый рисунок из линий

Технологии: canvas, JS.
Автор: Жерар Феррандес (@ge1doot)

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


Анимация часов из блоков

Технологии: CSS, JS.
Автор: Джон Кантнер (@jkantner)

Анимация часов из блоков Посмотреть живой пример


Трехмерная анимация соцсетей

Работает при наведении курсора.
Технологии: CSS-трансформации.
Автор: Даниэль Гонсалес (@dan10gc)

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


Трансформация куба на CSS

Вверху слева можно убрать галочку, чтобы тени были более четкими.
Технологии: CSS-анимация, CSS-трансформации.
Автор: Дэвид Харшид (@davidkpiano)

Трансформация куба на CSS Посмотреть живой пример


Анимация портрета

Технологии: canvas, JS.
Автор: Иван Богачев (@sfi0zy)

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


Цветной маятник-змейка на CSS

Технологии: CSS-анимация, CSS-трансформации.
Автор: Юсуке Накая (@YusukeNakaya)

Цветной маятник-змейка на CSS Посмотреть живой пример


Шум Перлина

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

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


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

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

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

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

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

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