Yesterday, I wrote a small toy with special effects of Web mouse. Of course, the code is not mine. It comes from Robin. The plug-in is also very simple, but considering that not everyone likes to use plug-ins, including myself, I took the time to write a detailed one today course , if you write the code directly in the topic, you don't need to open additional plug-ins. The code is the same, but it has been slightly modified. Thank the author. Well, there's no nonsense. The tutorial is as follows.

General theme templates have reserved user-defined css and statistical code interfaces. We need to use these two interfaces to realize mouse effects. Why not modify them directly in the theme template, because updating the theme template again after modifying the source code will lead to the recovery of the theme template, so the modified code will be gone and have to be added again, so we don't modify them directly in the template. The codes are divided into css and js. Take my topic as an example. Log in to the background, set the topic, find the custom css interface, and copy the following css code:

.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:#999999;
	-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:-18px;
	margin-top:-18px;
	width:36px;
	height:36px;
	background:#999999;
	opacity:.58
}
.cursor-outer {
	margin-left:-15px;
	margin-top:-15px;
	width:30px;
	height:30px;
	border:2px solid #999999;
	-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
}
.main-wrapper[data-magic-cursor=hide] .mouse-cursor {
	display:none;
	opacity:0;
	visibility:hidden;
	position:absolute;
	z-index:-1111
}
@media screen and (max-width:1023px) {
	.mouse-cursor {
	display:none;
}
}

The meaning of the last code is to hide this special effect when the screen is less than 1023 pixels. Why? Because I found in the local test that after opening the page on the mobile terminal, the mouse of this special effect will stay at the top left by default, so I hide it. If I like to keep it, I can delete the last paragraph.

In addition, if you don't like the default mouse color, you can replace and modify it yourself,

"background:#999999;" Is the color code of the center dot. "border: 2px solid #999999;" Is the color of the outer circle and 2px label boundary pixels. "background:#999999;" Is the background color when selected.

The above colors and margins can be modified according to the color matching of the website. After the css code is set, we can find the advertising setting (script code interface) or statistical interface in the theme setting, and copy and paste the following code:

<div class="mouse-cursor cursor-outer"></div>
<div class="mouse-cursor cursor-inner"></div>
<script>
jQuery(document).ready(function($) {
    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>

After the setting is completed, save it, clear the background home page, empty the cache and compile it. For other types of programs, just put the css code in the style file and the js code in the footer. Basically, there will be no conflict with the theme code. If you modify the source code, remember to back it up. Free errors will lead to website errors.

PS: there are many kinds of online tutorials about mouse effects, but generally speaking, they are all icing on the cake for the website. I prefer the introduction, so I don't set up some fancy special effects, which will make me feel that the guest will dominate the host. Well, I'm just optimistic. This tutorial article is completed, continue to update the theme template, and leave a message and feedback if there are problems.