[JAVASCRIPT/CSS] 마우스 왼쪽 클릭 이벤트
- 코딩
- 2020. 12. 12.
[JAVASCRIPT/CSS] 마우스 왼쪽 클릭 이벤트
블로그 내의 마우스 왼쪽 버튼 클릭 이벤트 입니다.
CSS
<style type="text/css">
div.clickEffect{
position:fixed;
box-sizing:border-box;
border-style:solid;
border-color:#4C4C4C;
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>
JAVASCRIPT
<script type="text/javascript">
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>
'코딩' 카테고리의 다른 글
[스파르타코딩클럽] HTTPS & SSL,JWT & OAUTH (0) | 2021.08.30 |
---|---|
[CMD] 프로세스 죽이기 서버 충돌 (0) | 2020.12.12 |
controller jquery를 이용한 alert 창 띄우는 방법 (0) | 2020.11.29 |
이클립스 톰캣 포트포워딩 하기 (iptime) (0) | 2020.01.05 |