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代码来制定出动画。