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

Question

我似乎无法在 Google 和 Stack Overflow 中找到类似的问题。这是我的情况。

我有一张 div 用作背景图片。我希望隐藏此图像，除了第二个 div 随鼠标移动的图像。

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

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

有没有办法让background-imagediv只能被"underneath"mouse-taildiv看到？就像一个 clip-path 是一个圆圈，但随着鼠标移动。如果可能的话，我只想使用 CSS 和 Javascript。谢谢。

Answer 1

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

overflow: hidden;

Answer 2

是的，通过对你的 "page-tail" div

应用一个巨大的 box-shadow

"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;
}

<div class="page-mouse-tail"></div>

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

Use a moving div as a CSS clip path

javascript

html

css

clip

clip-path