마우스 클릭시 효과음 나오고 마우스에 서클 퍼지는 효과 재미 있네요..

질답에 올라온것 오류 수정하고 적용해 보니 재미 있어서 팁자료실에 올립니다.

[code]

<audio id='audio_play' src='/click.mp3'></audio>
<style type="text/css">
    div.clickEffect{
        position:fixed;
        box-sizing:border-box;
        border-style:solid;
        border-color:#000000;
        border-radius:50%;
        animation:clickEffect 0.4s ease-out;
        z-index:99999;
    }
    @keyframes clickEffect{
        0%{
            opacity:1;
            width:0.5em; height:0.5em;
            margin:-0.25em;
            border-width:0.5rem;
        }
        100%{
            opacity:0.2;
            width:15em; height:15em;
            margin:-7.5em;
            border-width:0.03rem;
        }
    }
</style>
<script type="text/javascript">
    $(document).ready(function() {
      $("body").attr("onclick", "play()");
    });

    function play() {
      var audio = document.getElementById('audio_play');
      if (audio.paused) {
         audio.play();
      } else {
         audio.pause();
         audio.currentTime = 0;
      }
    }

    function clickEffect(e){
        var d=document.createElement("div");
        d.className="clickEffect";
        d.style.top=e.clientY+"px";d.style.left=e.clientX+"px";
        document.body.appendChild(d);
        d.addEventListener('animationend',function(){d.parentElement.removeChild(d);}.bind(this));
    }
    document.addEventListener('click',clickEffect);
</script>

[/code]

효과음 다운로드 
https://record-ay.tistory.com/32