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代碼來制定出動畫。