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

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

Бегущая зебра

Анимация меняется по клику в любом ее месте.
Технологии: CSS, three.js.
Автор: DPDK (@dpdknl)

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


Портреты

Поворачивайте «холст», просто двигая курсор в разные стороны.
Технологии: canvas, CSS, WebGL.
Автор: Жерар Феррандес (@ge1doot)

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

Портрет женщины Посмотреть живой пример


Анимация «Винтовая линия (Helix)»

Рисунок анимации зависит от положения курсора.
Технологии: canvas, CSS, JS.
Автор: Райан Тави (@rthavi)

Как меняется дерево с мая по декабрь Посмотреть живой пример


Трансформация логотипа

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

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


Красивая анимация с линиями

Кликом по любому месту вы начинаете новый цикл.
Технологии: canvas, CSS, JS.
Автор: Жерар Феррандес (@ge1doot)

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


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

Технологии: canvas, CSS, WebGL, particles.js.
Автор: DPDK (@dpdknl)

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


Анимация с курицей

Технологии: CSS, CSS-трансформации, CSS-анимация.
Автор: Хосе Росарио (@JoseRosario)

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


SVG-анимация леттеринг-логотипа

Технологии: SVG, CSS, CSS-трансформации, CSS-анимация.
Автор: Granify (@Granify)

SVG-анимация леттеринг-логотипа Посмотреть живой пример


Список дел с CSS-анимацией

Технологии: CSS, CSS-анимация, JS (но в JS нет необходимости, как указал автор).
Автор: Shaw (@shshaw)

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


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

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

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

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

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

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