심플한 마우스 효과입니다. 적용방법도 아주 간단하고 효과도 예뻐요! 클릭할 때마다 마우스 포인터에서 하트가 올라옵니다.
마우스 효과로 블로그 꾸미기를 해보세요! 심플한 마우스 효과입니다. 적용방법도 아주 간단하고 효과도 예뻐요! 클릭할 때마다 마우스 포인터에서 랜덤 색상의 하트 아이콘이 올라옵니다.
랜덤 색상 하트 마우스 효과 적용방법
- 아래 코드 블록의 스크립트를 마우스 더블 클릭으로 복사합니다.
<script type="text/javascript">
/*<![CDATA[*/
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
/*]]>*/</script></body>바로 위에 붙여넣고 저장합니다.- 페이지를 새로고침하고 클릭해보세요!
1. 랜덤 색상 하트 마우스 효과 미리보기
이제 다 끝났습니다. 미리보기에서 랜덤 색상 하트 마우스 효과를 확인해보세요!
간단한 효과로 블로그를 화사하게 꾸며보세요!