CSS3はキングをマッチングさせるときにパーティクルアニメーション効果を実現します

<div class="button">
  <div class="button-text">確認</div>
</div>

.ボタンテキスト{
  位置: 相対的;
  幅: 100%;
  境界線の半径: 4px;
  境界線: なし;
  カーソル: ポインタ;
}
.button-text:前、 
.button-text:after {
  位置: 絶対;
  コンテンツ： '';
  表示: ブロック;
  幅: 140%;
  高さ: 100%;
  左: -20%;
  Zインデックス: -1000;
  背景繰り返し: 繰り返しなし;
}
.button-text:before {
  表示: なし;
  上限: -75%;
  背景画像: 
    放射状グラデーション(円、#fff 20%、透明 20%)、 
    放射状グラデーション(円、透明度20%、#fff 20%、透明度30%)、 
    放射状グラデーション(円、#fff 20%、透明 20%)、 
    放射状グラデーション(円、#fff 20%、透明 20%)、 
    放射状グラデーション(円、透明度10%、#fff 15%、透明度20%)、 
    放射状グラデーション(円、#fff 20%、透明 20%)、 
    放射状グラデーション(円、#fff 20%、透明 20%)、 
    放射状グラデーション(円、#fff 20%、透明 20%)、 
    放射状グラデーション(円、#fff 20%、透明 20%);
  背景サイズ: 
    10% 10%、 
    20% 20%、 
    15% 15%、 
    20% 20%、 
    18% 18%、 
    10% 10%、 
    15% 15%、 
    10% 10%、 
    18% 18%;
}
.button-text:after {
  表示: なし;
  下限: -75%;
  背景画像: 
    放射状グラデーション(円、#fff 20%、透明 20%)、 
    放射状グラデーション(円、#fff 20%、透明 20%)、 
    放射状グラデーション(円、透明度10%、#fff 15%、透明度20%)、 
    放射状グラデーション(円、#fff 20%、透明 20%)、 
    放射状グラデーション(円、#fff 20%、透明 20%)、 
    放射状グラデーション(円、#fff 20%、透明 20%)、 
    放射状グラデーション(円、#fff 20%、透明 20%);
  背景サイズ: 
    15% 15%、 
    20% 20%、 
    18% 18%、 
    20% 20%、 
    15% 15%、 
    10% 10%、 
    20% 20%;
}
.button-text:アクティブ{
  変換: スケール(0.9);
}

var animateButton = function(e) {
  e.preventDefault;
  e.target.classList.remove('animate');
  e.target.classList.add('アニメーション');
  setTimeout(関数(){
    e.target.classList.remove('animate');
  },700);
};

var classname = document.getElementsByClassName("ボタンテキスト");
(var i = 0; i < クラス名.length; i++) {
  classname[i].addEventListener('click', animateButton, false);
}

.button-text.animate:before {
  表示: ブロック;
  アニメーション: topBubbles のイーズインアウト 0.75 秒早送り;
}
.button-text.animate:after {
  表示: ブロック;
  アニメーション: bottomBubbles のイーズインアウト 0.75 秒早送り;
}
@keyframes トップバブル {
  0% {
    背景位置: 
      5% 90%、 
      10% 90%、 
      10% 90%、 
      15% 90%、 
      25% 90%、 
      25% 90%、 
      40% 90%、 
      55% 90%、 
      70% 90%;
  }
  50% {
    背景位置: 
      0% 80%、 
      0% 20%、 
      10% 40%、 
      20% 0%、 
      30% 30%、 
      22% 50%、 
      50% 50%、 
      65% 20%、 
      90% 30%;
  }
  100% {
    背景位置: 
      0% 70%、 
      0% 10%、 
      10% 30%、 
      20% -10%、 
      30% 20%、 
      22% 40%、 
      50% 40%、 
      65% 10%、 
      90% 20%;
    背景サイズ: 
      0% 0%、 
      0% 0%、  
      0% 0%、  
      0% 0%、  
      0% 0%、  
      0% 0%;
  }
}
@keyframes ボトムバブル {
  0% {
    背景位置: 
      10% -10%、
      30% 10%、
      55% -10%、
      70% -10%、
      85% -10%、
      70% -10%、
      70% 0%;
  }
  50% {
    背景位置: 
      0% 80%、
      20% 80%、
      45% 60%、
      60% 100%、
      75% 70%、
      95% 60%、
      105% 0%;
  }
  100% {
    背景位置: 
      0% 90%、
      20% 90%、
      45% 70%、
      60% 110%、
      75% 80%、
      95% 70%、
      110% 10%;
    背景サイズ: 
      0% 0%、
      0% 0%、
      0% 0%、
      0% 0%、
      0% 0%、
      0% 0%;
  }
}

.king:before {
  位置: 絶対;
  コンテンツ： '';
  表示: ブロック;
  幅: 100%;
  高さ: 100%;
  上: 0;
  zインデックス: 1;
  背景繰り返し: 繰り返しなし;
  不透明度: 0.4;
}
.king:before {
  背景画像: 
    放射状グラデーション(円、#fff 20%、透明 20%)、 
    放射状グラデーション(円、透明度20%、#fff 20%、透明度30%)、 
    放射状グラデーション(円、#fff 20%、透明 20%)、 
    放射状グラデーション(円、#fff 20%、透明 20%)、 
    放射状グラデーション(円、透明度10%、#fff 15%、透明度20%)、 
    放射状グラデーション(円、#fff 20%、透明 20%)、 
    放射状グラデーション(円、#fff 20%、透明 20%)、 
    放射状グラデーション(円、#fff 20%、透明 20%)、 
    放射状グラデーション(円、#fff 20%、透明 20%);
  背景サイズ: 
    10% 10%、 
    12% 12%、 
    5% 5%、 
    12% 12%、 
    5% 5%、 
    10% 10%、 
    5% 5%、 
    10% 10%、 
    5% 5%;
  表示: ブロック;
  アニメーション: topBubbles の easy-in-out 3 秒前進、無限大;
}