Hiệu ứng trái tim khi nhấp chuột vào blogspot

Bạn là một coder hay developer thiết kế một website cho mình chắc chắn sẽ muốn trang trí cho blog của mình đúng không nào. Khi mà bạn đã nhìn quá quá nhiều với con trỏ chuột củ chuối mặc định rồi, bạn muốn thay cho mình một con chuột khác nhưng lại thấy không ưng ý, thì bài viết này sẽ làm cho bạn ưng ý ngay.

Trang trí cho trỏ chuột trên blogspot có khá nhiều hiệu ứng như: Tuyết rơi khi rê chuột, dòng chữ theo trỏ chuột.... và tại bài này là hiệu ứng trái tim bay lên khi nhấp vào bất kỳ vị trí nào trên giao diện blogspot.

Cách thực hiện cài đặt hiệu ứng trái tim khi nhấp chuột trên blogspot vào blog cũng khá đơn giản với việc bạn chỉ cần dán đoan javsscript sau đây vào trước thẻ </body> là xong tất cả mọi công việc rồi.
<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>
Bài đăng mới hơn Bài đăng cũ hơn

Bài viết liên quan