六边形的CSS3动画气泡效果
六边形的CSS3动画气泡效果
提问于 2016-12-13 14:46:49
我已经做了圆圈的气泡效果，现在我正在尝试通过css来做六边形的效果。但结果是意想不到的。
有没有人能说点什么!！
谢谢
回答 1
Stack Overflow用户
发布于 2016-12-14 16:57:30
恐怕你想要实现的目标是不可能实现的。当你创建六边形时，你使用边框来创建几个三角形，但是阴影不会投射到这个形状上。属性抛出包含框的阴影。
您可以使用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来制作动画。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41115107
复制相关文章
相似问题
腾讯云开发者
