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。

＆＃13;

$('#particle').draggable()

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用CSS掩码通过javascript创建的蒙版粒子

1 个答案: