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

时间:2016-07-29 22:13:35

标签: javascript css

我用javascript创建了一个粒子系统。每次用户将鼠标悬停在按钮上时,都会调用一个函数,并创建一个粒子,然后将其分配给一个不可见的div。粒子从div的底部移动到顶部。问题是这些粒子以div的方形移动。但是,我需要将这些粒子掩盖为多边形。移出该多边形的每个粒子都变得不可见。我用谷歌搜索了这个问题 - 没有运气找到一个合适的例子。

1 个答案:

答案 0 :(得分:1)

我不完全确定我是否理解正确,但根据我的理解,我创建了以下代码段。尝试移动红色方块。它应该被六边形修剪。您可以轻松创建面具here

代码基于CSS的clip-path属性,允许您定义用作遮罩的路径,剪切HTML元素的内容。请查看thisthis文章。

我做了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>
&#13;
&#13;
&#13;