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

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

Праздничная анимация

Технологии: CSS, CSS-гриды, particles.js.
Автор: Триша Салас (@trishasalas)

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


Парад солдатиков с параллакс-эффектом

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

Парад солдатиков с параллакс-эффектом Посмотреть живой пример


Конструктор машины

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

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


Шестиугольный прогресс-бар

Кнопкой «Random» вы снова запустите анимацию.
Технологии: SVG, CSS, GreenSock.js.
Автор: alaric web (@alaricweb)

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


Глючный прогресс-бар

Автор высмеивает бессмысленные прогресс-бары: когда индикатор вроде и есть, а толку от него ноль.
Технологии: CSS-анимация.
Автор: Крис Смит (@chris22smith)

Глючный прогресс-бар Посмотреть живой пример


Трансформации иконок соцсетей

Технологии: CSS, GreenSock.js.
Автор: Сэм Роз (@samrose3)

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


Анимация с кофемашиной

Для запуска нажмите на кнопку «Make coffee».
Технологии: CSS-трансформации, CSS-анимация, JS.
Автор: Джош Дженнингс (@jenningscreate)

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


Градиентный фон при наведении

Технологии: CSS.
Автор: Жюстин (@justinecodes)

Градиентный фон при наведении Посмотреть живой пример


Оптическая иллюзия

Когда уголки квадратов окрашиваются, возникает иллюзия искажения прямых линий.
Технологии: CSS-анимация.
Автор: Никита Дубко (@dark_mefody)

Оптическая иллюзия Посмотреть живой пример


Генератор деревьев

Кликните по любому месту, чтобы «посадить» дерево.
Технологии: canvas, JS.
Автор: dissimulate (@dissimulate)

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


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

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

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

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

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

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