Hiệu Ứng Thả Tim Khi Click Chuột

Hí các bạn, chào mừng các bạn đã đến với bài viết tiếp theo của mình. Tiếp tục chuyên mục Blogger Tricks mình sẽ chia sẻ cho các bạn code thả tim khi bạn click chuột vào màn hình.

Share Code Hiệu Ứng Thả TYM Khi Click Chuột

Nếu bạn muốn biết thả tim như thế nào hãy click vào bất cứ đâu trên màn hình, một hình trái tim sẽ từ từ bay lên mờ dần rồi biết mất từ nơi bạn click.

Hướng Dẫn

  • Bưới 1: Copy toàn bộ đoạn code dưới đây:

    <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ước 2: Dán toàn bộ đoạn code trên vào trước thẻ đóng </body>
  • Bước 3: Lưu template lại rồi bật blog lên click xem thành quả!

Lời Kết

Vậy là trên đây mình đã chia sẻ cho các bạn cách thêm hiệu ứng thả tym khi click vào màn hình cho blogspot. Nếu cảm thấy hay hãy comment bên dưới cho mình biết. Chúc các bạn một ngày làm việc và học tập hiệu quả!

Copyright © Phạm Văn Linh

Tham Khảo:
Code Pro


Thông báo !:

=========

Mình cần bán web và app này. Mọi người cần liên hệ nhé

=========

Nháy đúp liên tục nút [‣] để phát video

Liên hệ QUẢNG CÁO, góp ý, báo lỗi ➤ Tại Đây

=========

quangcao1

Các bạn đang xem truyền hình trực tuyến trên tại ứng dụng TiVi 5G - Trang Xem Tivi online tốt nhất, ổn định nhất, đáp ứng nhiều người truy cập cùng lúc. Xem Share Code Hiệu Ứng Thả TYM Khi Click Chuột - Tivi Online Share Code Hiệu Ứng Thả TYM Khi Click Chuột - Xem Share Code Hiệu Ứng Thả TYM Khi Click Chuột Chất Lượng Cao.

Danh sách kênh :

quangcao1

quangcao2

quangcao3