Эффект капельного преобразования в CSS

Эффект капельного преобразования в CSS

589

А сейчас давайте взглянем как формы могут перетекать друг в друга. Этот липкий тянучий амебный эффект почти всем знаком из видео c каплями ртути на поверхности. Не так давно мы ведали про морфинг форм в SVG , когда одна форма преобразуется в другую.

Я точно не уверен, кто 1-ый открыл этот метод внедрения в интернете, но вначале я ориентировался на демо от Lucas Bebber:

CodePen

Потом я увидел демо от Felix Hornoiu (GIF низкого качество для большей производительности в интернете):

Мысль довольная проста — применить свойство filter для элемента одновремено со значениями blur и contrast.
При правильном балансе в итоге выходит «достаточно острая» форма. Blur, что разумеется, производит эффект размытия, в то время как contrast придает очертание пятну в центре.

Основная же фишка заключается в том, что когда два заблюреных элемента размещены близко друг к другу, то при контрастировании они начинают смотреться как единое целое.

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

.stage {
/* непременно обязано быть указано для работы contrast */
background: white;

/* странноватым образом помогает при соединении границ, прячет переполнение */
padding: 30px;

-webkit-filter: contrast(20);
filter: contrast(20);
}
.dot {
border-radius: 50%;
width: 50px;
height: 50px;

/* также нужно для корректной работы contrast */
background: black;

-webkit-filter: blur(15px);
filter: blur(15px);
}

Финишный итог вы получите опосля того как анимируете ваши «капли». Вот демо на CodePen, где можно поиграться со значениями.

Поддержка браузерами
Бета Aurora уже v35 и я проверил, что там работает все непревзойденно. Веселит, что сейчас это работает не лишь на WebKit/Blink! Firefox 35 на сто процентов поддерживает фильтры без флагов и иных аспектов.

Не плохо. Таковым образом демо работает в Chrome / Safari / Opera / Firefox / iOS / Android. Не поддерживается лишь IE.

Предсказания по комментариям
Это не для практического внедрения!!! Успокойтесь.

Лично я просто без разума от данного трюка. Да, подобная реализация со обилием частей прилично нагружает CPU, но с 2-мя окружностями все работает непревзойденно.

habrahabr.ru Я уверен, есть наиболее совершенные методы реализации данной идеи.