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

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

Анимация с мармеладкой

Удерживая курсор, можно перемещать мармеладку. (Для работы анимации требуется высота окна браузера не менее 500px.)
Технологии: canvas, JS: matter, p5
Автор: Мариуш Дабровски (@MarioD)

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


Трехмерная структура

Удерживая курсор в разных местах, можно менять «направление взгляда».
Технологии: JS: webgl, fractal.
Автор: Джерард Феррандес (@ge1doot)

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


Псевдо-голограмма

Эффект трехмерной карточки. (Слева синяя кнопка позволяет перейти от автоматической анимации к управлению курсором.)
Технологии: CSS, JS.
Автор: Майк Армстронг (@MassivePenguin)

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


Вертикальный слайдер на CSS

Технологии: CSS анимация и флексы.
Автор: Чэнь Хуэй Цзин (@huijing)

Вертикальный слайдерна CSS Посмотреть живой пример


Анимация портрета из геометрических фигур

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

Анимация портрета из геометрических фигур Посмотреть живой пример


Таймер в стиле газоразрядного индикатора (типа «Nixie tube»)

Технологии: CSS, JS.
Автор: Стефанеску Лучиан (@lucitribal)

Таймер в стиле газозарядного индикатора Посмотреть живой пример


Танцующие фигурки

Мышкой можно хватать фигурку и перемещать.
Технологии: canvas, JS.
Автор: Джерард Феррандес (@ge1doot)

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


Анимация с цветными волнами

Удерживайте курсор для увеличения скорости.
Технологии: canvas, JS.
Автор: Луи Хоубрег (@Mamboleoo)

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


Радужный дождь

Кликните мышкой, чтобы вызвать эффект.
Технологии: JS: p5.
Автор: «Безжалостный Зуб» (@brettmitchell)

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


Этапы формирования заказа на CSS с анимацией

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

Этапы формирования заказа на CSS с анимацией Посмотреть живой пример


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

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

1 Комментарий
  1. seoonly.ru

    Спасибо!

Добавить комментарий для seoonly.ru Отменить ответ

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

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