创建蒙版的叠加聚光灯效果以显示图像

Question

我正在尝试在我的投资组合页面上创建一个很棒的“展示”效果。

这里是我试图用JS和CSS直观完成的示例。我的示例是使用Photoshop制作的。

这是一个 JS FIDDLE ，我发现并修改了我接近的位置。但是聚光灯太“硬”了，几乎没有就像我的想法一样优雅。我希望它看起来更像是“发光”，而不是圆形。

有人知道如何解决吗？任何帮助将非常感激。我愿意接受任何有关实现效果的建议。

// 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)});
    }
}

Answer 1

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

解决方案是使用径向渐变创建一个包含透明中心的大div。比您编写该div以跟随鼠标光标的脚本。将径向渐变div元素和内容框“ body”都设置为负z-index，以免妨碍页面内容。您还需要在JS中将div设置为“ Fixed”，以便当鼠标靠近视口边缘时不创建滚动条。

这是工作中的小提琴。

https://jsfiddle.net/d4em31n2/16/

所需的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);
    });
});