CSS3分享按钮

HTML

<div class="share-icon">
   <span class="s1"></span>
   <span class="s2"></span>
   <span class="s3"></span>
   <span class="s4"></span>
   <span class="s5"></span>
</div>

CSS

// share icon close transition
.share-icon {
  position: relative;
  width: 23px;
  height: 25px;
  cursor: pointer;
}
.share-icon span {
  position: absolute;
  display: block;
  width: 22px;
  height: 3px;
  background: #000;
  opacity: 1;
  transition: .2s ease-out;
  transform: rotate(0);
}
// line
.share-icon .s2 {
    transform: rotate(30deg);
    top: 7px;
}
.share-icon .s3 {
    transform: rotate(-30deg);
    top: 15px;
}
// circle
.share-icon .s1 {
    top: 1px;
}
.share-icon .s4 {
    top: 9px;
    right: 1px;
}
.share-icon .s5 {
    bottom: 0;
}
.share-icon .s1,
.share-icon .s4,
.share-icon .s5 {
    width: 8px;
    height: 8px;
    border-radius: 8px;
    transition: all .1s ease-out;
}
.share-icon.open .s2 {
  transform: rotate(45deg);
  top: 11px;
}
.share-icon.open .s3 {
  transform: rotate(-45deg);
  top: 11px;
}
.share-icon.open .s5,
.share-icon.open .s4,
.share-icon.open .s1 {
    transform: scale(0);
}

JS

$(".share-icon").click(function () {
    $(this).toggleClass("open");
});

另附：svg share icon close transition