パリンと弾けるグラスクラック演出

<div class="d08-11-10-stage">
          <button class="d08-11-10-btn" type="button">達成する</button>
        </div>

.d08-11-10-stage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
        .d08-11-10-btn{background:linear-gradient(135deg,#38bdf8,#6a5cff);color:#fff;border:none;border-radius:12px;padding:14px 28px;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 8px 20px rgba(56,189,248,.35);position:relative;z-index:2}
        .d08-11-10-flash{position:absolute;top:50%;left:50%;width:10px;height:10px;border-radius:50%;background:#fff;transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none}
        .d08-11-10-flash.is-go{animation:d08-11-10-flash .35s ease-out forwards}
        @keyframes d08-11-10-flash{0%{transform:translate(-50%,-50%) scale(.2);opacity:.9}100%{transform:translate(-50%,-50%) scale(9);opacity:0}}
        .d08-11-10-shard{position:absolute;top:50%;left:50%;width:16px;height:16px;background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(148,197,255,.55));clip-path:polygon(50% 0,100% 100%,0 100%);pointer-events:none;opacity:0}
        .d08-11-10-shard.is-go{animation:d08-11-10-shatter .7s cubic-bezier(.2,.8,.3,1) forwards}
        @keyframes d08-11-10-shatter{0%{opacity:1;transform:translate(-50%,-50%) rotate(0deg) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.3)}}

(function(){
        var stage=document.querySelector('#item-08-11-10 .d08-11-10-stage');
        var btn=document.querySelector('#item-08-11-10 .d08-11-10-btn');
        if(!stage||!btn)return;
        btn.addEventListener('click',function(){
          var flash=document.createElement('span');flash.className='d08-11-10-flash is-go';
          stage.appendChild(flash);
          setTimeout(function(){flash.remove();},400);
          for(var i=0;i<10;i++){
            (function(i){
              var s=document.createElement('span');s.className='d08-11-10-shard is-go';
              var angle=(Math.PI*2/10)*i+(Math.random()*0.3-0.15);
              var dist=50+Math.random()*40;
              s.style.setProperty('--dx',(Math.cos(angle)*dist)+'px');
              s.style.setProperty('--dy',(Math.sin(angle)*dist)+'px');
              s.style.setProperty('--rot',(Math.random()*360-180)+'deg');
              stage.appendChild(s);
              setTimeout(function(){s.remove();},750);
            })(i);
          }
        });
      })();