Mở Đầu

Hello! Lại là 1 chuyên mục share code tiếp đây. Mấy nay mình lại tiếp tục bận đi học nên việc chăm sóc và share tip các thứ cũng vì thế mà gián đoạn! Trick Pro của mình thành lập cũng được gần 1 tháng rồi, thời gian đầu hoạt động mình dành mọi thời gian sự tâm huyết của mình blog Trick Pro. Cũng có thể gọi là mình ăn ngủ nghỉ nhưng luôn nghĩ về blog này. Hiện tại mình đang là học sinh lớp 11 cấp 3, chắc hẳn mọi người cũng tìm hiểu và biết chương trình lớp 11 là khó và nhiều kiến thức nhất trong cả 3 năm cấp 3. Mình vẫn luôn ở đây với các bạn và duy trì hoạt động và sự suốt hiện của mình luôn có mặt.

Định hướng

Thời gian này mới vào tầm đầu năm học nên mình chưa bị bó buộc thời gian và áp lực thi cử nên mình vẫn sẽ duy trì tích cực và chia sẻ mẹo hay mỗi ngày cho các độc giả

Nội Dung

Như các bạn đã thấy ở tiêu đề và nội dùng ở phần mở đầu. Nay mình sẽ share code tạo hiệu ứng bong bóng con trỏ chuột trên blog website của anh em. Thật ra code này đã có và tồn tại từ lâu rồi, nhưng có vẻ anh em đã lãng quên. Hôm nay cũng đúng dịp gần đến tết trung thu nên mình share lại luôn. Hy vọng anh em sẽ thích.

Chia sẻ code thay đổi dáng con trỏ chuột bong bóng siêu đẹp

Code thay đổi dáng con trỏ chuột bong bóng siêu đẹp

Cách sử dụng: Để dùng được thì anh em chỉ cần copy mã sau và dán vào phần chỗ anh em muốn để nhưng lưu ý là phải thêm vào trước thẻ đóng

</body<

 <div class='mouse-cursor cursor-outer'></div>
<div class='mouse-cursor cursor-inner'></div><style>
.mouse-cursor{position:fixed;left:0;top:0;pointer-events:none;border-radius:50%;-webkit-transform:translateZ(0);transform:translateZ(0);visibility:hidden}
.cursor-inner{margin-left:-3px;margin-top:-3px;width:6px;height:6px;z-index:10000001;background-color:#CED0D4;-webkit-transition:width .3s ease-in-out,height .3s ease-in-out,margin .3s ease-in-out,opacity .3s ease-in-out;transition:width .3s ease-in-out,height .3s ease-in-out,margin .3s ease-in-out,opacity .3s ease-in-out}
.cursor-inner.cursor-hover{margin-left:-30px;margin-top:-30px;width:60px;height:60px;background-color:#CED0D4;opacity:.3}
.cursor-outer{margin-left:-15px;margin-top:-15px;width:30px;height:30px;border:2px solid #CED0D4;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:10000000;opacity:.5;-webkit-transition:all .08s ease-out;transition:all .08s ease-out}
.cursor-outer.cursor-hover{opacity:0}
</style><script>//<![CDATA[
$(function () {
    'use strict';
            var _window = $(window);
            var screenWidth = _window.width();
            if (screenWidth > 991) {
                var myCursor = jQuery('.mouse-cursor');
                if (myCursor.length) {
                    if ($("body")) {
                        const e = document.querySelector(".cursor-inner"),
                            t = document.querySelector(".cursor-outer");
                        let n, i = 0,
                            o = !1;
                        window.onmousemove = function (s) {
                            o || (t.style.transform = "translate(" + s.clientX + "px, " + s.clientY + "px)"), e.style.transform = "translate(" + s.clientX + "px, " + s.clientY + "px)", n = s.clientY, i = s.clientX
                        }, $("body").on("mouseenter", "a, .cursor-pointer", function () {
                            e.classList.add("cursor-hover"), t.classList.add("cursor-hover")
                        }), $("body").on("mouseleave", "a, .cursor-pointer", function () {
                            $(this).is("a") && $(this).closest(".cursor-pointer").length || (e.classList.remove("cursor-hover"), t.classList.remove("cursor-hover"))
                        }), e.style.visibility = "visible", t.style.visibility = "visible"
                    }
                }
            }
});
//]]></script>

Lời kết

Trên đây là mình Chia sẻ code thay đổi dáng con trỏ chuột bong bóng siêu đẹp. Chúc các bạn một ngày học tập và làm việc thật hiệu quả. Xin chào và hẹn gặp lại!

Copyright © Trick Pro