移動するdivをCSSクリップのパスとして使用する

Question

Googleやスタックオーバーフローで同様の質問が見つからないようです。ここに私の状況があります。

背景画像にdivが使用されています。マウスで動き回る2番目のdivの後ろにあるものを除いて、この画像を隠しておきたいです。

移動divはこのように250x250ピクセルです。

私はこのJavascriptを使用して周りのDIV移動

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

：

"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のみを使用したいと思います。ありがとうございました。

Answer 1

あなたは第二のdivのスタイルにこれを追加することができます。

overflow: hidden; 

Answer 2

はい、あなたの "ページ・テール" の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; 
 
}

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