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!
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.
Share code hiệu ứng click chuột thả tim cho blog/website
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>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ỳ!
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!
