Frontend разработчик

0:59

This media is not supported in your browser

VIEW IN TELEGRAM

Трюк по CSS ⭐

Вы можете создать этот сверкающий фон с помощью одного элемента, используя mask-composite, при этом анимируя mask-position.

.canvas {
  background: var(--gradient);
  mask:  var(--dots), var(--noise);
  mask-composite: intersect /* source-in, xor */;
  animation: flicker;
}
@​keyframes flicker {
  to { mask-position: 50% 50% , 0 50%; }
}

Хитрость заключается в том, чтобы наложить маски друг на друга, а затем использовать значение intersect для mask-composite✨.
Intersect работает так же, как и в SVG, объединяя маски и беря их пересечение.

Маска dots — это базовый radial-gradient, который повторяется по всему элементу. Маска noise — сгенерированное изображение шума Перлина.

mask: radial-gradient(circle at 50% 50%, white 2px, transparent 2.5px) 50% 50% / 40px 40px;

mask: url("noise.png") 50% 50% / 256px 256px;

https://codepen.io/jh3y/pen/ExrWOJe

Мы в MAX

👉 @frontend_1

👍4🔥2

www.tgoop.com/frontend_1/4098

1.28K viewsOct 8 at 07:46

Трюк по CSS ⭐

Вы можете создать этот сверкающий фон с помощью одного элемента, используя mask-composite, при этом анимируя mask-position.

.canvas {
  background: var(--gradient);
  mask:  var(--dots), var(--noise);
  mask-composite: intersect /* source-in, xor */;
  animation: flicker;
}
@​keyframes flicker {
  to { mask-position: 50% 50% , 0 50%; }
}

mask: radial-gradient(circle at 50% 50%, white 2px, transparent 2.5px) 50% 50% / 40px 40px;

mask: url("noise.png") 50% 50% / 256px 256px;

BY Frontend разработчик