css - 透明放大镜的制作方法？

Question

前段时间我看到一些网站在鼠标悬停时使用很酷的透明效果。

如何制作透明元素，以便当您将鼠标悬停在网站背景上时，您可以看到该区域下方的图像？

找不到这方面的任何信息，请帮助:)

Answer 1

好的一些策略和一些例子。

策略:

• 放置背景
• 在上面放置一些障碍物
• 制作一个背景相同的div
• 如果鼠标移动，移动这个div
• 如果 div 移动，将背景移动到主背景的负数位置..

例子:

$(function(){
    $(document).mousemove(function(e){
        var x = e.pageX;
        var y = e.pageY;

        var $t=$(".transfier");
        var newLeft =x-$t.width() / 2;
        var newTop= y-$t.height() / 2;
        $t.offset({
            top: newTop,
            left: newLeft
        });

        $t.css('background-position-x', 0 - x + $t.width() / 2);
        $t.css('background-position-y', 0 - y + $t.height() / 2);
    });
});

body {
    background: url(https://wallpaperscraft.com/image/height_canyon_retina_81205_3840x2400.jpg);
    background-position: 0px 0px;
    background-repeat: no-repeat;
    margin: 0px;
}

.transfier {
    background: url(https://wallpaperscraft.com/image/height_canyon_retina_81205_3840x2400.jpg);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 200px;
    height: 200px;
    border: 2px solid green;
}

.blockMyView {
    background-color: white;
    width: 75%;
    height: 300px;
    border: 1px solid black;
    margin: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="transfier"> hoi </div>
<div class="blockMyView"></div>