SVG + CSS3实现分享按钮小demo

点击上方蓝字可关注我

接上期SVG简单实现融滞效果，做出来的效果就是要用它，那么这个效果可以用到什么地方呢？今天我们就简单做一个分享按钮点击效果的小demo，主要利用CSS3 + SVG实现，不涉及JS。

老规矩，先上最终效果图：

怎么样？看着还不错，点击分享按钮，径向扇形弹出各种分享平台链接按钮，每个小球在接触时都会产生融滞效果，像是从分享按钮里弹出来的泡泡一样，‘小泡泡’弹出来的时候，分享按钮还会抖动一下哦。当然，只要你愿意，你还可以在分享按钮周围添加更多的‘小泡泡’。

言归正传，看我们html结构吧：

结构中的svg标签这里就不再赘述，你可以狠狠的点击这里。

然后<input type="checkbox" id="share">，该标签是通过checkbox的选中与非选中状态，作为‘小泡泡’弹出、收起的标志。

布局有了，当还需要css样式的支持：

CSS3通过transform属性给每个‘小泡泡’添加运动效果。

其中，

[type='checkbox']{
           position: absolute;
           clip: rect(0 0 0 0);
       }

让checkbox选框不可见，它只作为一个标志来用，这里我们不需要看到它。

接下来进一步完善效果，给分享按钮添加抖动效果，让效果更逼真一点。

利用CSS3 animation属性的动画效果，具体css如下：

Ok，到此我们就完美实现了开篇展示的效果啦！

相信大家还有更多更好的方法实现更多更复杂更完美的效果，我们，加油！

Over，拜~