마우스 모양 변경 및 클릭시 파동 효과

마우스 모양

* {cursor: url(https://cur.cursors-4u.net/cursors/cur-11/cur1054.cur), auto !important;}

 

클릭시 파동 효과

 

<script>
      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>

HTML - </head> 위에 복사

/*마우스 클릭 효과*/
div.clickEffect{
	position:fixed;
	box-sizing:border-box;
	border-style:solid;
	border-color:#828282;
	border-radius:50%;
	animation:clickEffect 0.8s ease-out;
	z-index:5;
}
@keyframes clickEffect{
	0%{
		opacity:1;
		width:0.5em; height:0.5em;
		margin:-0.25em;
		border-width:0.3rem;
	}
	100%{
		opacity:0.1;
		width:15em; height:15em;
		margin:-7.5em;
		border-width:0.01rem;
	}
}

css 에 붙여넣기