有没有办法让我的鼠标拥有深色背景并“显示”颜色？

问题描述 投票：0回答：1

我第一次尝试编写自己的网站代码，但遇到了一些麻烦。我正在遵循这个教程，以便让聚光灯跟随我的鼠标。这是代码。但我希望在整个主页上有一个彩虹渐变，并让聚光灯在页面上移动时显示颜色，同时保持屏幕的其他部分黑暗，更类似于原始的网站，YouTube 教程正在复制，当鼠标在屏幕上移动时，其颜色会发生变化。

我的想法是有不同的图层：深色背景、“斑点”、渐变，然后像教程一样模糊。渐变不会在深色背景下显示出来，但是当白色斑点位于渐变下方时，颜色就会显示出来，这是我的想法。我目前所处的位置只是白色斑点和深色背景。我想知道这是否可能，因为我认为问题在于渐变的混合模式干扰（尽管我不知道这是否是问题）。

我在使用 Safari 时也遇到问题。在 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);
}
<div id="gradient-color"></div>
<div id="blob"></div>
<div id="blur"></div>
<section class="showcase">
  <nav class="navbar vertical-center line line-vertical"></nav>
</section>

javascript html css
1个回答
0
投票

是的，有！ 该代码使用 css z-index 来工作，因此您可以在保持线性渐变的同时改变斑点的颜色

document.addEventListener('mousemove', function(e) {
  const cave = document.querySelector('.cave');
  const x = e.clientX;
  const y = e.clientY;
  cave.style.setProperty('--x', `${x}px`);
  cave.style.setProperty('--y', `${y}px`);
  cave.style.background = `radial-gradient(circle at ${x}px ${y}px, transparent 10px, rgba(0, 0, 0, 1) 100px)`;
});
body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  color: #fff;
  font-family: Arial, sans-serif;
  position: relative;
}

.content {
  z-index: 1;
}

.cave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  pointer-events: none;
  z-index: 2;
}
<body>
  <div class="content">
    <h1>Welcome to the Cave</h1>
    <p>This is some hidden text that will be revealed by the light around the mouse cursor.</p>
    <img src="https://cdn.wallpapersafari.com/29/40/uFtGia.jpg" width=200>
  </div>
  <!--rest of your code-->

  <div class="cave"></div>

</body>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.