CSS3动画气泡效果的六角形形状

Question

我已经为圆圈做了气泡效应，现在我试图通过CSS以六角形的形状进行泡沫。但是结果并非如此。

圆形演示

六边形演示1

六边形演示2

可以散发一些灯！

谢谢

Answer 1

我恐怕您尝试实现的目标是不可能的。当您创建六角形时，您正在使用边界来创建几个三角形，但是阴影不会以这种形状抛弃。CSS阴影属性抛出了包含框的阴影。

您可以使用SVG

在六角形（或任何想要的数字）上实现阴影

.hex{
  fill: #64C7CC;
  filter: url(#dropshadow);
}
<svg width="100%" height="300">
  <defs xmlns="http://www.w3.org/2000/svg">
    <filter id="dropshadow" height="130%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> 
      <feOffset dx="2" dy="2" result="offsetblur"/> 
      <feMerge> 
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/> 
      </feMerge>
    </filter>
  </defs>
  <polygon class="hex" points="300,150 225,280 75,280 0,150 75,20 225,20"></polygon>
</svg>

然后使用一些JavaScript来制定动画。