А сейчас давайте взглянем как формы могут перетекать друг в друга. Этот липкий тянучий амебный эффект почти всем знаком из видео 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 Я уверен, есть наиболее совершенные методы реализации данной идеи.
