渐入佳境：巧用 CSS 变量让渐变伴随鼠标起舞

2023-09-06 03:51:20

简介

在网页设计中，渐变一直是营造视觉美感和提升用户体验的有效手段。而当渐变与鼠标交互相结合时，便能激发出令人惊叹的视觉效果。本文将带你深入探索如何利用 CSS 变量，让渐变跟随鼠标的律动，为你的网站增添一份灵动与趣味。

CSS 变量赋能渐变

CSS 变量是一项强大的技术，它允许你在样式表中定义可重用的值。通过利用 CSS 变量，我们可以轻松创建随鼠标移动而变化的渐变。

首先，我们需要定义两个 CSS 变量：

:root {
  --gradient-start: #000;
  --gradient-end: #fff;
}

这些变量分别代表渐变的起始色和结束色。

让渐变跟随鼠标

现在，我们使用 background-image 属性创建线性渐变：

.container {
  background-image: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
}

接下来，我们需要使用 JavaScript 来捕获鼠标移动事件，并相应地更新 CSS 变量的值。这可以通过以下代码实现：

document.addEventListener('mousemove', (e) => {
  let x = e.clientX;
  let y = e.clientY;

  let gradientStart = `hsl(${x % 360}, 100%, 50%)`;
  let gradientEnd = `hsl(${y % 360}, 100%, 50%)`;

  document.documentElement.style.setProperty('--gradient-start', gradientStart);
  document.documentElement.style.setProperty('--gradient-end', gradientEnd);
});