微互动按钮点击动画特效【原创】

页面的head部分，先引入jQuery库，然后设置好页面元素的样式，代码如下：

<script type="text/javascript" src="js/jquery.min.js"></script>
<style type="text/css">
.add {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  display: inline-block;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s ease;
  transition-delay: 0.15s;
}
.add svg {
  transform: rotate(270deg);
}
.add svg circle {
  stroke-width: 2;
  stroke: #fff;
  fill: none;
  stroke-dasharray: 95;
  stroke-dashoffset: 190;
  transition: all 0.6s ease;
  stroke-linecap: round;
}
.add svg #plus {
  transform-origin: 50% 50%;
  transition: all 0.8s ease;
}
.add svg #plus path {
  stroke-width: 2;
  stroke: #fff;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.add.toggle circle {
  stroke-dasharray: 95;
  stroke-dashoffset: 285;
}
.add.toggle #plus {
  transform: rotate(225deg);
}
.add.toggle #plus path {
  stroke: #ff3808;
  transition: all 0.8s ease;
}
.add.toggle:hover {
  background: rgba(255,255,255,0.9);
}
body {
  background-image: linear-gradient(0deg, #3808ff, #88b8ff);
}

页面的body部分，将svg放入div容器里，结构其实挺简单的，代码如下：

<div class="add">  
  <svg width="32px" height="32px" viewBox="0 0 32 32">
    <circle cx="16" cy="16" r="15"></circle>
    <g id="plus">
      <path d="M16,10 L16,22"></path>
      <path d="M10,16 L22,16"></path>
    </g>
  </svg>
</div>

页面的底部，设置好按钮点击事件的响应即可，代码如下：

$(".add").click(function() {
    $(this).toggleClass("toggle");
});