如何实现自定义鼠标指针？

浏览器默认鼠标指针为黑色箭头样式，当滑过超链接时显示为手型，在一些互动创意类型的网站上，设计师脑洞大开，设计了各式各样的自定义鼠标指针，非常具有观赏性。VOKO的前端工程师自己写了一款超酷的圆心呼吸效果的自定义鼠标指针样式。

HTML

<!-- start: cursor -->
<div class="cursor"></div>
<!-- end: cursor -->

<!-- start: img_slide -->
<div class="img_slide">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="1.jpg"></div>
            <div class="swiper-slide"><img src="2.jpg"></div>
            <div class="swiper-slide"><img src="3.jpg"></div>
            <div class="swiper-slide"><img src="4.jpg"></div>
            <div class="swiper-slide"><img src="5.jpg"></div>
            <div class="swiper-slide"><img src="6.jpg"></div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</div>
<!-- end: img_slide -->

CSS

/* cursor */
.cursor{opacity:0; width:20px; height:20px; pointer-events:none; display:flex; justify-content:center; align-items:center; cursor:default; position:absolute; z-index:999; left:0; top:0; margin:-10px 0 0 -10px; mix-blend-mode:difference;}
.cursor::after {content:""; position:absolute; left:0; top:0; width:100%; height:100%; border-radius:100%; background:rgba(255, 255, 255, 0.9); transition:all 0.2s ease-out 0s; -moz-transition:all 0.2s ease-out 0s; -webkit-transition:all 0.2s ease-out 0s;}
.cursor .text {position:relative; z-index:1;}
.cursor .text p {font-size:0; width:100px; text-align:center; transition:all 0.2s ease-out 0s; -moz-transition:all 0.2s ease-out 0s; -webkit-transition:all 0.2s ease-out 0s;}
.cursor.active::after {transform:scale(10);}
.cursor.active .text p {font-size:22px;}

/* img_slide */
.img_slide {padding:150px 0; display:flex; align-items:center; background:#000000;}
.img_slide .swiper-container {max-width:1000px; width:100%; overflow:visible;}
.img_slide .swiper-container .swiper-button-next,
.img_slide .swiper-container .swiper-button-prev {display:none;}
.img_slide .swiper-container .swiper-pagination {padding:0; color:#FFFFFF; bottom:-40px; font-size:22px;}

JavaScript

// swiper
var swiper = new Swiper('.img_slide .swiper-container', {
    lazy: true,
    loop: false,
    autoplay: false,
    speed:600,
    paginationClickable: true,
    centeredSlides: true,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    pagination: {
        el: ".swiper-pagination",
        type: "fraction",
    },
    breakpoints: {
        320: {
            slidesPerView: 2,
            spaceBetween: 20
        },
        768: {
            slidesPerView: 3,
            spaceBetween: 20
        },
        1280: {
            slidesPerView: 2,
            spaceBetween: 40
        }
    },
    on:{
        touchMove: function (e) {
            $('.cursor').css({
                "transform": "translate3d("+e.pageX+"px, "+e.pageY+"px, 0)"
            });
        },
    },
});