Question

我试图产生一种效果，其中整个页面都是黑暗的，除了一个透明的特定部分。那部分将是一个随机移动的圆圈。现在这个圈子在页面上的哪个位置，圆圈下的内容就可以被看到，而整个剩余的页面将保持黑暗。

我在哪里？
我创建了一个脚本，可以在页面上随机移动圆圈，但是我无法获得效果。不知道该怎么做。

请查看下图。它会让您更好地了解我想要实现的目标。 enter image description here

现在考虑这个透明圆圈在页面上随机移动（我已经为此制作了脚本）。请看this fiddle。它会显示我的位置。谢谢..

Answer 1

这对于向移动的div添加巨大的盒子阴影很简单。

无需额外元素。

未加固定的CSS

box-shadow: 0 0 0 9999px black;

Answer 2

尝试使用CSS Masks：

只需在Photoshop中画一个圆圈，然后使用CSS技术在图像上应用蒙版。

<强> CSS：

 -webkit-mask-image: url('image.png');