用 JavaScript 改變 CSS 的變數

懶人包。

簡述

先建立好 CSS 變數：

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

.box {
  position: absolute;
  top: var(--mouse-y);
  left: var(--mouse-x);
}

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

就這樣完成囉！