CSS3アニメーション六角形のバブル効果

Question

私はサークルのバブル効果を行っていますが、今ではCSSを使って六角形でやろうとしています。結果は期待できません。

Circle DEMO

Hexagonal DEMO 1

Hexagonal DEMO 2

いくつかのいずれかは、いくつかの光を当てるしてくださいすることができます！

ありがとうございました

Answer 1

私はあなたが達成しようとしていることは恐れています。六角形を作成するときには、境界線を使用して2つの三角形を作成していますが、このシェイプでは影は投げられません。 CSSのshadowプロパティは、格納するボックスの影を投げます。

あなたは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のビットを使用することができます。