Thêm hiệu ứng nhấp chuột cho con trỏ trong Blogger

hi xin chào mọi người nha, quay trở lại với chủ đề của blogger, hôm nay thì mình xin chia sẽ cho anh em một cái hiệu ứng khá là thú vị khi chúng ta click chuột nhá. okii bắt đầu thôi nha. 



Đối với hiệu ứng này thì nó cũng như hiệu ứng tạo click hiệu ứng trái tim z. 

việc tạo hiệu ứng click như thế nó giúp cho website của chúng ta thêm sinh động hơn và đẹp hơn. Hiệu ứng hiệu ứng chuột này được tạo ra với sự trợ giúp của HTML, CSS, JavaScript và JQuery. Bạn có thể đã thấy trên trang web hoặc blog của người khác, khi bạn nhấp chuột sau khi truy cập trang web của họ, hiệu ứng nhấp chuột sẽ được đưa ra.

Cách thực hiện

Bước 1: các bạn vào trang quản trị trang blogger --> chủ đề -->. chỉnh sửa HTML 

Bước 2: copy toàn bộ mã bên dưới và dán vào phía trên của thẻ </head> 

<style type="text/css">
/* Mouse Click Effect Css By kimidev.site */
.mteffect{width:60px;height:60px;border-radius:99em;border:3px solid #6200ee;position:fixed;left:50%;transform:scale(0.5);display:none;z-index:999}.mteffect.active{display:block;animation:mteffect 0.4s ease-out forwards}
@keyframes mteffect{from{transform:scale(0.2);opacity:1}to{transform:scale(1);opacity:0}}
</style>

Bước 3: Copy toàn bộ mã bên dưới và dán vào phía trên của thẻ </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script>//<![CDATA[
$("body").append($('<span class="mteffect"></span>')),$(document).on("click",function(n){var i=n.clientX,a=n.clientY;$(".mteffect").css({top:a-30,left:i-30}).addClass("active")}),$(".mteffect").on("animationend webkitAnimationEnd oAnimationEnd oanimationend MSAnimationEnd",function(){$(".mteffect").removeClass("active")});
//]]>
</script>
Thế là xong rùi đó. bây giờ các bạn chỉ cần lưu lại và xem thành quả thôi.

Phía trên là toàn bộ code mà giúp chúng ta có thể tạo ra hiệu ứng khi chúng ta click chuột. Các bạn cũng có thể tham khảo một vài code khác qua hastag #cursor trên web. Nếu như có thắc mắc gì thì các bạn hãy comment bên dưới cho mình biết nhá. chúc các bạn thành công nhe. 

Post a Comment

Previous Post Next Post