使用移动的 div 作为 CSS 剪辑路径答案

【问题标题】：Use a moving div as a CSS clip path使用移动的 div 作为 CSS 剪辑路径
【发布时间】：2016-12-19 07:10:59
【问题描述】：

我似乎在 Google 和 Stack Overflow 上都找不到类似的问题。这是我的情况。

我有一个用于背景图像的 div。我希望隐藏此图像，除了第二个用鼠标移动的 div 后面的内容。

移动的 div 是一个 250 x 250 像素的圆圈，像这样。

<div class="page-mouse-tail"></div>
<style>
.page-mouse-tail {
    position: fixed;
    float: left;
    width: 250px;
    height: 250px;
    border-radius: 100%;
}
</style>

我使用这个 Javascript 移动那个 div：

"use strict";
var mouseTails = document.getElementsByClassName("page-mouse-tail");
document.addEventListener("mousemove", function (event) {
    Array.prototype.forEach.call(mouseTails, function (tail) {
        tail.style.left = event.pageX + "px";
        tail.style.top = event.pageY + "px";
    });
});

有没有办法让背景图像 div 只能被鼠标尾 div 的“下方”看到？就像一个圆形的剪辑路径，但随着鼠标移动。如果可能，我只想使用 CSS 和 Javascript。谢谢。

【问题讨论】：

标签： javascript html css clip clip-path

【解决方案1】：

是的，通过将巨大的 box-shadow 应用到您的“page-tail”div

"use strict";
var mouseTails = document.getElementsByClassName("page-mouse-tail");
document.addEventListener("mousemove", function(event) {
  Array.prototype.forEach.call(mouseTails, function(tail) {
    tail.style.left = event.pageX + "px";
    tail.style.top = event.pageY + "px";
  });
});

body {
  background: url(http://wallpaper.ouzs.com/wallpapers/windows_dual_monitor2880x900.jpg);
  background-size: cover;
}
.page-mouse-tail {
  position: fixed;
  float: left;
  width: 150px;
  /* for demo */
  height: 150px;
  border-radius: 100%;
  border: 1px solid red;
  box-shadow: 0 0 0px 9999px white;
}

&lt;div class="page-mouse-tail"&gt;&lt;/div&gt;

【讨论】：

感谢您提供这个创造性的解决方案。您知道巨型箱形阴影可能对性能造成的影响吗？当我尝试这段代码时，如果我让 box-shadow 太大，它就不会渲染。
我不承认，。我想您可以改用 100vw，这可能会使其更小，性能更高，但是会进行很多屏幕重绘，但这可能是 CSS 解决方案的限制。

【解决方案2】：

您可以将它添加到第二个 div 的样式中：

overflow: hidden;

【讨论】：