Hiệu ứng trái tim khi nhấp chuột trên blogspot

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ảm nhận một cách trực quan bạn có thể thực hiện việc nhấp chuột tại bất cứ vị trí nào tại bài viết này.

Áp Dụng Hiệu Ứng Trái Tim Khi Nhấp Chuột Vào 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.

<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>

...

Nội dung chính