Капля реализована небольшим JS кодом без добавления каких-либо библиотек и плагинов

Для более наглядного примера использования этого фона, я добавил поверх несколько блоков, кликая на которые, капля примет новую форму.

Пример:

Блок 1
Блок 2
Блок 3

HTML:

CSS:

JS:

Раскомментировав строчку block[i].addEventListener('mouseenter', mouseClick); и удалив или закомментировав предыдущую (block[i].addEventListener('click', mouseClick);), капля будет меняться при заходе курсора на блок, а не по клику.

Найдено на codepen.io у пользователя Dillon

Смотрите также:

Электрический паук следующий за курсором мыши

Эффект, который накладывает на слой бесконечное количество звездочек

Анимированный эффект тумана на фоновом изображении средствами CSS

Добавить комментарий:

Ваш комментарий отправлен!