Question

[我的带有鼠标移动的css剪切蒙版的代码] [1]

$(document).ready(function(){
  $(document).mousemove(function(event){
    $(".bg").css("top",event.pageY-75);
     $(".bg").css("left",event.pageX-75);
  });

});

body{
overflow:hidden;  
}
.bg{
  position:fixed;
  width:150px;
  height:150px;
  background:url("https://images.unsplash.com/photo-1512505965932-0dbfa7e7b8c8?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ") ;
   background-size: 960px 1300px;
  background-attachment:fixed;
 -webkit-background-clip: content-box;
  text-align:center;
  border-radius:180px;
  transition: top 0.12s ease;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>cursor mask</title>
</head>
<body>
  <div class="bg">
    
  </div>
</body>
</html>

此代码包含一些图像抖动问题，我需要创建一个游标，该游标需要用作剪贴蒙版。这样光标就可以看透白色背景。

有没有其他方法可以在CSS或jQuery中创建剪贴蒙版？

0 个答案: