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