如何使用 JS 动态更新CSS变量 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jsInCssApply</title>
  <link rel="stylesheet" href="./css.css">
  <style>
     
  </style>
</head>
<body>
    <!-- 代码部分begin -->
    <div class="demo-music">
        
    </div>
  <!-- 代码部分end -->
  <script>
      var pos = document.documentElement
      pos.addEventListener('mousemove',e=>{
          pos.style.setProperty('--x',e.clientX + 'px')
          pos.style.setProperty('--y',e.clientY + 'px')
      })
  </script>
</body>
</html>

　　

.demo-music{
    width: 100%;
    height: 100vh;
  
    background-image: url(./img/img-2.jpg);
    background-size: cover;
    clip-path: circle(200px at var(--x) var(--y));
}
/* img{
    width: 100%;
    height: 100%;
    object-fit: cover;
} */
body{
    width: 100%;
    height: 100%;
    background-color: black;
    padding: 0;
    margin: 0; 
}

 

posted on 2021-01-18 22:09  白不了的黑发  阅读(547)  评论(0)  编辑  收藏  举报