点击特效按钮 - jq插件库

html, body {
  width: 100%;
  height: 100%;
}

#app {
  font-family: 'Open Sans', sans-serif;
  font-size: 24px;
  background-image: linear-gradient(to bottom right,
    #ff4e4e 0 15%, #f8ff64 40% 60%, #00ce1a 85% 100%);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-splatter {
  color: #ffffff;
  font-family: inherit;
  font-weight: bold;
  background-color: #4487ed;
  width: 12em;
  height: 4em;
  border: 0;
  outline: 0;
  padding: 0;
  margin: 0;
  position: relative;
  border-radius: 0.9em;
  box-shadow: 0 0.6em 0.9em rgba(0, 0, 0, 0.6);
  user-select: none; /* Thanks to @SplittyDev */
  transform: translateY(-0.5em);
  transition:
    background-color 300ms cubic-bezier(0.18, 0.89, 0.32, 1.28),
    box-shadow 300ms cubic-bezier(0.18, 0.89, 0.32, 1.28),
    transform 300ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.btn-splatter:focus {
  outline: 0;
}

.btn-splatter:active {
  background-color: #2770df;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
  transform: translateY(0em) scale(0.9);
  transition:
    background-color 150ms ease-out,
    box-shadow 150ms ease-out,
    transform 150ms ease-out;
}

.splatter {
  position: absolute;
  top: 0;
  left: 0;
}

.splatter-round, .splatter-ring, .splatter-star {
  position: absolute;
}

.splatter-round {
  width: 1em;
  height: 1em;
  background-color: #1da5ff;
  border-radius: 50%;
}

.splatter-ring {
  width: 0.8em;
  height: 0.8em;
  border: solid 0.35em #0099e6;
  border-radius: 50%;
}

.splatter-star {
  width: 1.8em;
  height: 1.8em;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="%23006dd0" viewBox="0 0 24 24"%3E%3Cpath%20d%3D%22M12%2C17.27L18.18%2C21L16.54%2C13.97L22%2C9.24L14.81%2C8.62L12%2C2L9.19%2C8.62L2%2C9.24L7.45%2C13.97L5.82%2C21L12%2C17.27Z%22%3E%3C%2Fpath%3E%3C/svg%3E');
}

</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js'></script>

},
  template: `
<button
  class="btn-splatter"
  v-on:click="makeSplatter(event)"
>
  {{text}}
  <div
    v-for="splatter, i in splatters"
    v-bind:class="splatter.type"
    v-bind:style="splatter.style"
    v-bind:ref="createRef(i)"
  ></div>
</button>
`,
  methods: {
    createRef: function (i) {
      return 'splatter-' + i;
    },
    getSizeEm: function (s) {
      if (s === 0) {
        return 1 / 2 + 'em';
      } else if (s === 1) {
        return 1.5 / 2 + 'em';
      } else if (s === 2) {
        return 1.8 / 2 + 'em';
      } else {
        return 0;
      }
    },
    createToXPos: function (tb, w, h, s) {
      let positionStyle = { style: {} };
      let randomPosition = Math.floor(Math.random() * w);
      let fixedPosition = tb === 0 ? h : 0;

positionStyle.style.top = 'calc(' + fixedPosition + 'px - ' + s + ')';
      positionStyle.style.left = 'calc(' + randomPosition + 'px - ' + s + ')';

return positionStyle;
    },
    createToYPos: function (lr, w, h, s) {
      let positionStyle = { style: {} };
      let randomPosition = Math.floor(Math.random() * h);
      let fixedPosition = lr === 0 ? w : 0;

positionStyle.style.left = 'calc(' + fixedPosition + 'px - ' + s + ')';
      positionStyle.style.top = 'calc(' + randomPosition + 'px - ' + s + ')';

return positionStyle;
    },
    createsplatter: function (el, count, types, w, h) {
      for (let i = 0; i < count; i++) {
        let type = Math.floor(Math.random() * 3);
        let xOrY = Math.round(Math.random());
        let tblr = Math.round(Math.random());
        let splt = null;
        let sz = Math.random() + 0.5;

if (xOrY === 0) {
          splt = this.createToXPos(tblr, w, h, this.getSizeEm(type));
        } else {
          splt = this.createToYPos(tblr, w, h, this.getSizeEm(type));
        }

splt.type = types[type];
        splt.scale = sz;

splt.style.display = 'none';
        splt.style.transform = 'scale(' + sz + ')';

if (splt !== null) {
          this.splatters.push(splt);
        }
      }
    },
    explodeSplatter: function () {
      for (var i = 0; i < this.splatters.length; i++) {
        if (this.splatters[i].animationEnd === true) {
          continue;
        }

if (typeof this.splatters[i].moving === 'undefined') {
          let el = this.$refs['splatter-' + i];
          let an = Math.floor(Math.random() * 359) + 1;

this.splatters[i].style.display = 'block';

this.splatters[i].moving = true;

let psY = Math.sin(an) * 3 + 'em';
          let psX = Math.cos(an) * 3 + 'em';
          let scl = this.splatters[i].scale;

TweenLite.to(el, 0.8, {
            transform:
            'translate(' + psX + ', ' + psY + ') rotate(720deg) scale(0)' }).
          eventCallback('onComplete', () => {
            el.dataset.animationEnd = true;
          });
        }
      }
    },
    makeSplatter: function (e) {
      let el = e.target;
      let count = Math.floor(Math.random() * 4) + 5;
      let types = ['splatter-round', 'splatter-ring', 'splatter-star'];
      let w = el.clientWidth;
      let h = el.clientHeight;

this.createsplatter(el, count, types, w, h);
    } },

watch: {
    splatters: function (newData, oldData) {
      setTimeout(() => {
        this.explodeSplatter();
      }, 1);
    } } });

// -----

var app = new Vue({
  el: '#app' });
</script>

在线运行