六角形的CSS3动画气泡效果

Question

我已经为圆圈做了泡泡效果，现在我正试图通过css以六边形形状进行。但结果不是预期的。

Circle DEMO

Hexagonal DEMO 1

Hexagonal DEMO 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来制作动画。