tgoop.com/mefody_dev/408
Last Update:
Электрическая рамка
Принёс вам демку, в которой интересно поразбираться.
Балинт Ференци собрал на CodePen классный пример рамки, по которой как будто идёт электрический ток. Как это работает:
- При помощи фильтра feTurbulence создаётся три слоя с шумом. Это буквально статические картинки, которые выглядят как цветной дым.
- Каждому слою задана бесконечная анимация, которая двигает слой либо влево, либо вверх. Интересно, что слоёв, которые движутся вверх, сразу два.
- При помощи feComposite и feBlend эти слои смешивают в режиме color-dodge. Получается общий источник пикселей в виде анимированного шума.
- И затем применяется feDisplacementMap, который склеивает картинку, поверх которой будет применяться фильтр, и сгенерированный шум в тонкие электрические линии.
- В CSS это подключается просто, filter: url(#turbulent-displace).
Вся магия в том, что сгенерированный шум во время анимации создаёт яркие и менее яркие области, которые псевдослучайно перемещаются по картинке. Если при помощи фильтров использовать эти яркие области для карты смещения, получается вау-эффект. В демке ещё хорошо имитируются игра света и блики на поверхности, что в комбинации даёт очень красивую, на мой взгляд, карточку.
Сохранил себе в закладки на случай, если захочется что-нибудь эдакое технологическое поделать в интерфейсах.
https://codepen.io/BalintFerenczy/pen/KwdoyEN
BY mefody.dev
Share with your friend now:
tgoop.com/mefody_dev/408