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

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

Имитация чернильных клякс

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

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


«Сеть» из неоновых огоньков

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

Сеть из неоновых огоньков Посмотреть живой пример


Абстрактный пейзаж с анимацией

Технологии: canvas, JS.
Автор: Луи Хоубрег (@Mamboleoo)

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


Переключатель на флексах

Выберите другой вариант, чтобы увидеть анимацию.
Технологии: CSS, flexbox.
Автор: Shaw (@shshaw)

Переключатель на флексах Посмотреть живой пример


Искривление фоновых изображений при прокрутке

(может работать некорректно в браузере Firefox)
Технологии: CSS, CSS-трансформации, JS.
Автор: Yugam (@pizza3)

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


Забавная анимация с «пушистыми» буквами

Удерживая курсор, можно поворачивать надпись.
Технологии: CSS, WebGL, three.js, three.bas.
Автор: DPDK (@dpdknl)

Заводная анимация с пушистыми буквами Посмотреть живой пример


Симпатичный дизайн формы авторизации

Начните вводить текст, чтобы увидеть анимацию формы.
Технологии: CSS, JS.
Автор: fajjet (@fajjet)

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


Анимация кнопки с эффектом при наведении

Технологии: CSS-анимация, CSS-трансформации.
Автор: Даниэль Гонсалес (@dan10gc)

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


Черная 3D-абстракция

Фигуру можно поворачивать курсором, удерживая его, а также приближать и отдалять колесиком мыши.
Технологии: canvas, JS.
Автор: Никита Скарговский (@nikita_ska)

Красивая 3D-абстракция Посмотреть живой пример


Анимация корабля на CSS

Чтобы увидеть корабль вам, возможно, нужно прокрутить ниже. Он находится по середине холста.
Технологии: CSS-анимация, SVG, CSS-трансформации.
Автор: Лилиан (@lilianqian)

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


Абстракция в черно-золотом цвете

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

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


Пушистое создание

Удерживая курсор, вы можете поворачивать анимацию. Перезагрука страницы меняет ее цвет.
Технологии: WebGL, three.js.
Автор: Сения Задворных (@zadvorsky)

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


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

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>

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