Tạo hiệu ứng trái tim khi nhấp chuột bất kỳ vào blogspot

Anh Trai Nắng
10
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 blogspot.

Bạn là một coder hay developer thiết kế một website cho mình chắc chắn sẽ muốn trang trí cho blog của mình đúng không nào.

Tạo hiệu ứng trái tim khi nhấp chuột bất kỳ vào blogspot
Tạo hiệu ứng trái tim khi nhấp chuột bất kỳ vào blogspot.

Cài đặt hiệu ứng trái tim

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 đoạn javsscript sau đây vào trước thẻ </body>  là xong tất cả mọi công việc rồi.

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

Quá đơn giản phải không nào. Demo thì các bạn nhấp nhấp nhấp chuột trái trực tiếp trên bài viết này sẽ thấy!

Kết luận

Khi mà bạn đã nhìn quá quá nhiều với con trỏ chuột củ chuối mặc định rồi, bạn muốn thay cho mình một con chuột khác nhưng lại thấy không ưng ý, thì bài viết này sẽ làm cho bạn ưng ý ngay. Thanks!

Xem thêm: Biến đổi con trỏ chuột bằng CSS đơn giản cho blogspot

Đăng nhận xét

HƯỚNG DẪN BÌNH LUẬN

10 Nhận xét

Đăng nhận xét

#buttons=(Thanks!) #days=(7)

À mình có làm website tăng tương tác MXH giá rẻ. Mọi người nếu cần thì ghé sử dụng các dịch vụ thử nha. Ghé xem dịch vụ
Ok, Go it!

HƯỚNG DẪN BÌNH LUẬN

Chèn link

Sử dụng công cụ Tạo link

Chèn hình ảnh

LINK_ANH - sử dụng công cụ upload ảnh. Và chỉ cần lấy link ảnh chèn vào bình luận là ảnh tự động hiển thị.

Định dạng chữ

<b>Chữ in đậm</b>
<i>Chữ in nghiêng</i>
<u>Chữ gạch chân</u>
<strike>Chữ gạch ngang</strike>

Chèn một đoạn Code

Đầu tiên sử dụng công cụ này để mã hóa đoạn code muốn chèn.
Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code]

Khác

Nhập Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.
Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

Đã hiểu