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