Skip to content

前端 JS 生成随机 CSS 样式

Published: at 05:52 PMSuggest Changes

期望每次打开页面鼠标悬停的时候,悬停颜色是随机的,而不是固定的。

const randomHoverColor = () => {
  // hsl(0deg 100% 96.5%);
  const h = Math.floor(Math.random() * 360);
  // const s = Math.floor(Math.random() * 100);
  // const l = Math.floor(Math.random() * 100);
  return `hsl(${h}deg 100% 99% / 85%)`;
};

const addRandomHoverColor = () => {
  const elements = document.documentElement;
  elements.style.setProperty("--hover-color", randomHoverColor());
};
 .button {
    background-color: var(--hover-color);
    &:hover {
      background-color: var(--hover-color);
    }
  }

Previous Post
JS 获取浏览器指纹
Next Post
前端 JS 生成好看的背景