Question

是否可以更改背景的不透明度，但仅限于光标区域下方（例如白色小圆圈）？我觉得它有点像基本热图，但热量不会停留 - 它只是跟随光标。

目前我有以下

HTML：

html {
  background-color: #000;
  width: 100%;
  height: 100%;
}

JS：

$(document).mousemove(function(event){
    var i = event.pageX.toPrecision(1) / 1000;
    $("html").css('opacity', i)
});

对不起，这可能是一个非常基本的起点。我需要使用画布吗？

Answer 1

你可以使用svg

来做到这一点

我做了什么： -

我放置了两个相同的坐标，高度和宽度相同的图像，并在顶部（具有完全不透明度）上给出一个圆形clip-path，当鼠标移动圆圈的位置也发生变化

$('svg').on('mousemove',function(e){
    $('.a').attr('cx',e.pageX).attr('cy',e.pageY)
      
})

.one{
    opacity:.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg width="500" height="500">
    <clippath id="clip" >
        <circle cx="50" cy="50" r="50" class="a"/>
    </clippath>
    
    <image xlink:href="https://images.unsplash.com/photo-1474575981580-1ec7944df3b2?dpr=1&auto=format&fit=crop&w=1500&h=934&q=80&cs=tinysrgb&crop=&bg=" width="500" height="500" x="0" y="0"   class="one"/>
     
   <image xlink:href="https://images.unsplash.com/photo-1474575981580-1ec7944df3b2?dpr=1&auto=format&fit=crop&w=1500&h=934&q=80&cs=tinysrgb&crop=&bg=" width="500" height="500" x="0" y="0" clip-path="url(#clip)"/>
  </svg>

根据鼠标位置更改区域的不透明度

1 个答案: