使用 JavaScript 修改 CSS 变量

下面是两个 CSS 变量（通常也叫“CSS 自定义属性”）：

:root {
  --mouse-x: 0px;
  --mouse-y: 0px;
}

可以用这两个变量来设置元素的位置：

<div class="mover"></div>

.mover {
  left: var(--mouse-x);
  top: var(--mouse-y);
}

然后可以通过 JavaScript 来动态更新变量的值：

let root = document.documentElement

root.addEventListener('mousemove', e => {
  root.style.setProperty('--mouse-x', e.clientX + 'px')
  root.style.setProperty('--mouse-y', e.clientY + 'px')
})

这样就实现了元素跟随鼠标运动的效果：

就这么简单。

---------