使用CSS掩碼javascript創建的面具

Question

我用javascript製作了一個粒子系統。每當用戶將鼠標懸停在某個按鈕上時，就會調用一個函數，並創建一個單個粒子，然後將其分配給一個不可見的div。粒子從div的底部移動到頂部。問題是這些粒子以div的正方形移動。但是，我需要將這些粒子掩蓋成多邊形形狀。每個粒子移出這個多邊形變得不可見。我搜索了這個問題 - 沒有找到合適的例子。

Answer 1

我不完全確定，如果我正確理解你，但基於我的理解，我創建了以下代碼片段。嘗試移動紅色方塊。它應該用六角形形狀剪裁。你可以很容易地創建你的口罩here。

該代碼基於CSS的clip-path屬性，該屬性允許您定義用作掩碼的路徑，剪切HTML元素的內容。看看this和this的文章。

我製作了2 div s。一個是容器（#box），第二個是容器的子件（#polygon）。 #polygon填充其父項的整個空間，並將clip-path屬性應用於它。最後，粒子在#polygon之內。 #polygon和#box都設置了CSS屬性overflow: hidden。

$('#particle').draggable()

#box { 
 
    width: 200px; 
 
    height: 100px; 
 
    background: purple; 
 
    margin: 50px; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
#polygon { 
 
    overflow: hidden; 
 
    width: 100%; 
 
    height:100%; 
 
    -webkit-clip-path: polygon(51% 21%, 79% 35%, 79% 70%, 53% 87%, 25% 72%, 24% 37%); 
 
    clip-path: polygon(51% 21%, 79% 35%, 79% 70%, 53% 87%, 25% 72%, 24% 37%); 
 
} 
 

 
#particle { 
 
    width: 10px; 
 
    height: 10px; 
 
    margin: 50px; 
 
    background: red; 
 
    position:absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
 

 

 
<div id="box"> 
 
    <div id="polygon"> 
 
     <div id="particle"></div> 
 
    </div> 
 
</div>