Home
blogger

Share code hiệu ứng click chuột thả tim cho blog/website

code hiệu ứng click chuột, share code hiệu ứng click chuột, hiệu ứng thả tim, code thả tin, code hiệu ứng cho web, hiệu ứng rê chuột, thủ thuật blogge

Hướng dẫn tạo hiệu ứng click chuột cho blog/website

Hello, xin chào mọi người lại là Code Pro đây! Hôm nay mình sẽ chia sẻ cho các bạn một đoạn code rất xinh!

hiệu ứng click chuột
Hướng dẫn tạo hiệu ứng click chuột cho blog/website

Khi tạo ra được một trang web, ngoài chức năng ra bạn còn phải trang trí website để giao diện thêm phong phú. Hôm nay mình sẽ hướng dẫn các bạn tạo hiệu ứng click chuột thả trái tim trên blog/website bằng Javascript.

Các bạn có thể xem hiệu ứng ngay trên bài viết này bằng cách click chuột vào vị trí bất kỳ!

Source:

Copy code phía dưới và thêm vào trước thẻ đóng </body>

<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>
Vậy là xong rồi đó!

Lời kết

Đoạn code trên sẽ giúp chiếc blog/website của bạn trở nên hấp dẫn hơn rất nhiều. Nếu có bất cứ thắc mắc hay khiếu nại về bản quyền hãy comment ngay phía dưới cho mình biết nhé. Chúc các bạn một ngày tốt lành!

Copyright @ Code Pro
Sống hết mình !