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

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

Анимация «Дуэль»

Технологии: CSS, SVG, JS.
Автор: Энгер Бьюза (@enger)

Дуэль Посмотреть живой пример


Неоновая вывеска

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

Неоновая вывеска Посмотреть живой пример


Анимация с авокадо

Нужно «схватить» курсором косточку и потянуть в сторону. Предупреждение: анимация сопровождается звуком!
Технологии: canvas, CSS, JS.
Автор: Себастьян ДеРосси (@derossi_s)

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


Портрет из текстовой мозаики

Технологии: CSS-фильтры, mix-blend-mode.
Автор: Дадли Стори (@dudleystorey)

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


Создание рисунка из частиц

«Нарисуйте» какие-нибудь линии «ручкой», удерживая курсор. После этого нажмите «Create Particles» для генерации частиц.
Технологии: canvas, WebGL, particles.js.
Автор: DPDK (@dpdknl)

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


Забавная анимация с жирафом

Нужно «схватить» жирафа за область шеи и удерживать. Предупреждение: анимация сопровождается звуком!
Технологии: canvas, CSS, create.js.
Автор: Себастьян ДеРосси (@derossi_s)

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


Мозаика Вороного

Технологии: WebGL, three.js, GLSL.js.
Автор: Лиам Эган (@shubniggurath)

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


Текстовые часы

Технологии: CSS, CSS-анимация, JS.
Автор: Альваро Монторо (@alvaromontoro)

hover-эффект у SVG-иконок через CSS-переменные Посмотреть живой пример


Красивая анимация ползунка с выбором количества

Экспериментируйте, перемещая ползунок с разной скоростью.
Технологии: CSS, SVG, JS.
Автор: Gabi (@enxaneta)

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


«Текучие» радио-кнопки

Выбирайте разные кнопки, чтобы увидеть анимацию.
Технологии: CSS, CSS-трансформации, CSS-анимация.
Автор: Микаэль Айналем (@ainalem)

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


Выделение строки таблицы при наведении

Эффект с :not(:hover) использован для акцента на одну строку таблицы.
Технологии: CSS.
Автор: Бенджамин Реторе (@bnthor)

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


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

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>

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