滑动鼠标修改卡片颜色色值

效果演示

代码展示

vue-script

<script setup>
// 滑动鼠标修改色值 hsl(num, 91%, 95%)
import { onMounted } from "vue";
const initCard = (vm) => {
  const html = document.documentElement;
  const defaultColor =
    getComputedStyle(html).getPropertyValue("--bg-card-color");
  let x = 37;
  vm.addEventListener("mousemove", function (event) {
    x = event.clientX;
    html.style.setProperty("--bg-card-color", defaultColor.replace(/(\d+)/, x));
  });
  vm.addEventListener("mouseout", function (event) {
    x = 37;
    html.style.setProperty("--bg-card-color", defaultColor);
  });
};

onMounted(() => {
  initCard(document.querySelector(".test-a-bg-box .card"));
});
</script>

vue-template

<template>
  <section class="test-a-bg-box">
    <div class="card"></div>
  </section>
</template>

vue-style

<style lang="scss">
:root {
  --bg-card-color: hsl(37, 91%, 95%);
  --bg-card-shadow: silver;
}
// 深色主题, 即 color-scheme: dark;
html.dark {
  --bg-card-color: hsl(37, 18%, 35%);
  --bg-card-shadow: #000000;
}
.test-a-bg-box {
  .card {
    width: 260px;
    height: 150px;
    border-radius: 16px;
    box-sizing: border-box;
    text-align: center;
    font-size: 18px;
    line-height: 2;
    color: #666666;
    user-select: none;
    filter: drop-shadow(0 0 9px var(--bg-card-shadow));
    /* 1. 圆半径10px => x轴0px y轴50% */
    background-image: radial-gradient(
        10px at 0px 50%,
        transparent 100%,
        var(--bg-card-color) 100%
      ),
      radial-gradient(
        10px at 20px 50%,
        transparent 100%,
        var(--bg-card-color) 100%
      ),
      linear-gradient(0deg, var(--bg-card-color), var(--bg-card-color));
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: 20px 100%, 20px 100%, calc(260px - 40px) 100%;
    background-position: 0px 0px, calc(260px - 20px) 0px, 20px 0px;
    transition: 0.3s background-image ease;
  }
}
</style>