<!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;
}