[티스토리] 마우스 클릭 애니메이션 넣기

* 모바일 버전(티스토리링크/m)에서는 적용되지 않습니다. *

* 출처 : https://fdossena.com/?p=html5cool/clickfx/i.frag *

클릭시 마우스커서로부터 동그라미가 퍼져나가는 css애니메이션입니다.

저도 지금 사용하고 있는데 귀여워서 좋네요.

애니메이션 속도나 동그라미의 크기도 조절 가능하니 취향대로 수정해주면 될 듯합니다.

스킨편집으로 들어가서 css와 html에 아래의 코드들을 넣어주면 됩니다.🙂

1.css

	div.clickEffect{
	position:fixed;
	box-sizing:border-box;
	border-style:solid;
	border-color:#FFFFFF;
	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.5em;
	}
	100%{
	opacity:0.2;
	width:15em; height:15em;
	margin:-7.5em;
	border-width:0.03em;
	}
	}

view raw 마우스클릭애니메이션.css hosted with ❤ by GitHub

2.html의<script></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);

view raw 마우스클릭애니메이션.js hosted with ❤ by GitHub

+저는 이 수치값으로 사용하고 있어요.

	@keyframes clickEffect{
	0%{
	opacity:1;
	width:0.5em; height:0.5em;
	margin:-0.25em;
	border-width:0.1rem;
	}
	100%{
	opacity:0.2;
	width: 4.0em; height: 4.0em;
	margin:-2.0em;
	border-width:0.03rem;
	}
	}

view raw 수치값수정.css hosted with ❤ by GitHub