Есть ли способ сделать темный фон и «показать» цвет с помощью мыши? ⇐ CSS

[Anonymous]

Я впервые пытаюсь написать код для собственного веб-сайта и столкнулся с некоторыми проблемами. Я следую этому уроку, чтобы прожектор следовал за моей мышью. Вот код. Но я хотел бы иметь радужный градиент на всей моей домашней странице и чтобы мой прожектор показывал цвет при движении по странице, сохраняя при этом другие части экрана темными, что больше похоже на исходный веб-сайт, который воспроизводится в учебнике YouTube. , имеет меняющиеся цвета для мыши при ее перемещении по экрану.
Моя идея заключалась в том, чтобы иметь разные слои: темный фон, «капля», градиент, а затем размытие, как на учебник. Градиент не будет отображаться на темном фоне, но когда белая капля находилась под градиентом, цвета проявлялись, по моему мнению. Сейчас я нахожусь на этапе, когда это просто белое пятно и темный фон. Мне интересно, возможно ли это вообще, поскольку я думаю, что проблема в том, что мешают режимы наложения градиента (хотя я не знаю, проблема ли это вообще).
Я' У меня тоже проблемы с сафари. В Chrome я могу получить плавный каплю, которая отслеживает мою мышь с размытием, однако в Safari капля либо не появляется, либо отслеживание отключено, либо капля перезапускает свое положение каждый раз, когда я перемещаю мышь. Я знаю, что разные браузеры требуют разных вещей, но мне интересно, есть ли более простые способы убедиться, что оба браузера могут обрабатывать сайт.
А также, если вы знаете другой способ простого переключения цвета для моего объекта, сохраняя при этом линейный градиент, что тоже было бы полезно!
Вот мой код HTML, CSS и JavaScript. Спасибо!

Код: Выделить всё

const blob = document.getElementById("blob");

window.onpointermove = event => {
const {
clientX,
clientY
} = event;

blob.animate({
left: `${clientX}px`,
top: `${clientY}px`
}, {
duration: 2500,
fill: "forwards"
});
};

Код: Выделить всё

body {
background-color: #222020;
height: 100vh;
margin: 0;
overflow: hidden;
position: relative;
}

#gradient-color {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(50% 123.47% at 50% 50%, #00ff94 0%, #720059 100%), linear-gradient(121.28deg, #669600 0%, #ff0000 100%), linear-gradient(360deg, #0029ff 0%, #8fff00 100%), radial-gradient(100% 164.72% at 100% 100%, #6100ff 0%, #00ff57 100%), radial-gradient(100% 148.07% at 0% 0%, #fff500 0%, #51d500 100%);
background-blend-mode: screen, color-dodge, overlay, difference, normal;
z-index: 1;
opacity: 0;
}

#blob {
height: 34vmax;
aspect-ratio: 1;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background-color: white;
mix-blend-mode: difference;
opacity: 1;
z-index: 2;
}

#blur {
height: 100%;
width: 100%;
position: fixed;
z-index: 3;
backdrop-filter: blur(12vmax);
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/790 ... g-my-mouse