带有融合粘滞效果的分享小交互实例页面

核心CSS代码（完整见页面源代码）：

.target {
    filter: url("#goo");
}
.share {
    width: 64px; line-height: 64px;
    background-color: #cd0000;
    color: #fff;
    border-radius: 50%;
}
[type="checkbox"] {
    position: absolute;
    clip: rect(0 0 0 0);
}
[class*="icon-share-"] {
    position: absolute;
    width: 48px; height: 48px;
    background-color: #cd0000;
    border-radius: 50%;
    transition: transform .5s;
    transform: scale(0.5);
}
:checked + .target .icon-share-weibo { 
    transform: scale(1) translate(-70px, 60px);    
}
:checked + .target .icon-share-wechat {  
    transform: scale(1) translate(0, 75px);    
}
:checked + .target .icon-share-qq {
    transform: scale(1) translate(70px, 60px);    
}
:checked + .target .share {
    animation: jello 1s;
}

HTML代码：

<svg width="0" height="0">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
      <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
    </filter>
  </defs>
</svg>
<input type="checkbox" id="share">
<div class="target">
    <label class="share" for="share">分享</label>
    <span class="icon-share-weibo"><img src="weibo.png"></span>
    <span class="icon-share-wechat"><img src="wechat.png"></span>
    <span class="icon-share-qq"><img src="qq.png"></span>
</div>