마우스 클릭시 효과음 나오고 마우스에 서클 퍼지는 효과 재미 있네요.. 정보
HTML 마우스 클릭시 효과음 나오고 마우스에 서클 퍼지는 효과 재미 있네요..![](http://sir.kr/data/member_image/go/goldmask.gif?1702597317)
본문
질답에 올라온것 오류 수정하고 적용해 보니 재미 있어서 팁자료실에 올립니다.
효과음 다운로드
https://record-ay.tistory.com/32
!-->
<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>
효과음 다운로드
https://record-ay.tistory.com/32
!-->
추천
0
0
댓글 0개