Javascript 创建遮罩覆盖聚光灯效果以显示图像

我正试图在我的投资组合页面上创造一个令人敬畏的“展示”效果

下面是一个我试图用JS和CSS在视觉上实现的示例。我的例子是用Photoshop制作的

这里有一个我找到并修改了一个接近的地方。。但是聚光灯太“硬”，没有我想象的那么优雅。我希望它感觉更像一个“辉光”，而不是一个圆圈

有人知道怎么修吗？任何帮助都将不胜感激。我愿意接受任何关于实现这一效果的建议

// Create the spotlight
function createSpotlight() {
    $('.spotlight').width(spotlightDiameter + 'px')
                   .height(spotlightDiameter + 'px');

    for (var i = 0; i < numSpotlightLayers; i++) {
        var layerDiameter = spotlightDiameter + (i * spotlightLayerThickness * 2);
        var opacity = 1 - (i / numSpotlightLayers);

        $('.spotlight').append('<div class="layer' + i + '"></div>');

        $('.spotlight .layer' + i)
                .width(layerDiameter + 'px')
                .height(layerDiameter + 'px')
                .css({borderRadius: (layerDiameter >> 1) + 'px',
                      opacity: opacity,
                      zIndex: (numSpotlightLayers - i)});
    }
}

//创建聚光灯
函数createSpotlight（）{
$（“.spotlight”）.width（聚光灯直径+像素）
.高度（聚光灯直径+像素）；
对于（var i=0；i>1）+“px”，
不透明度：不透明度，
zIndex：（numSpotlightLayers-i）}）；
}
}

所以我要回答我自己的问题。大声说出来，感谢@Skyline3000在评论部分提出了解决方案

解决方案是创建一个具有包含透明中心的径向渐变的大div。然后编写div脚本以跟随鼠标光标。将径向渐变div元素和内容框“body”设置为负的

z-index

值，以避免妨碍页面内容。您还需要在JS中将div设置为“Fixed”，以便在鼠标靠近视图端口边缘时不创建滚动条

这是一把小提琴

所需CSS：

  position:fixed;
  background: -webkit-radial-gradient(center center, circle cover, rgba(117, 245, 71, 0), rgba(0, 20, 42,1) 4%);
    background:         radial-gradient(center center, circle cover, rgba(117, 245, 71, 0), rgba(0, 20, 42,1) 100%) 4%);

所需JS：

var img=$('div');
$(document).ready(function(e) {
    $(document).mousemove(function(e) {
        var positionLeft = e.clientX - img.width()/2;
        var positionTop = e.clientY - img.height()/2;
        img.css({'position': 'fixed', 'left': positionLeft, 'top': positionTop});
        mousePositionValueDiv.text(e.clientX+', '+e.clientY);
    });
});

---

哈哈，我太不耐烦了，我一直在刷新页面，哈哈哈。上帝，我需要一个生命，如果我刚刚创建了一个PNG图像褪色/透明的中间。在每一侧添加一个巨大的方框阴影，以100%填充页面高度和宽度，并将其设置为跟随鼠标。然后我可以把它和鲸鱼的图像放在一个负的z指数里。思想？或者有更好的方法吗？你可以用

radial-gradient（）。从透明开始，将其淡入背景色。呜呜呜。。。为什么我没想到呢？哈哈，我会给它一个try@KYSSE，答案就在你自己的片段中。检查var
spotlightlayer厚度
。。。