WordPress 主题添加鼠标跟随特效

function zm_mouse_cursor() { ?>
<!-- 必须的DIV -->
<div class="mouse-cursor cursor-outer"></div>
<div class="mouse-cursor cursor-inner"></div>
<!-- JS脚本 -->
<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>

<!-- 样式 -->

<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: #ffa9a4;

-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: #ffa9a4;

opacity: .3

}
.cursor-outer {

margin-left: -15px;

margin-top: -15px;

width: 30px;

height: 30px;

border: 2px solid #ffa9a4;

-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

}

</style>

<?php }

add_action( 'wp_footer', 'zm_mouse_cursor' );