<!-- 鼠标 -->
<div class="fixed_cursor">
    <div class="cursor" data-speed="8">
        <div class="whole"></div>
    </div>
</div>



/* 鼠标样式 */
.fixed_cursor{position:fixed;top:0;left:0;z-index:99999;pointer-events:none;transition:.6s;transition-delay:.6s;mix-blend-mode:exclusion}
.fixed_cursor .cursor{opacity:0;pointer-events:none;transition:opacity .3s}
.fixed_cursor .cursor .whole{width:20px;height:20px;display:flex;align-items:center;justify-content:center;transition:.3s}
.fixed_cursor .cursor .whole:after{content:'';width:100%;height:100%;position:absolute;border-radius:50%;background-color:#fff;transition:all .25s ease-out}
.fixed_cursor .cursor .whole:before{content:'';width:120%;height:120%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);border-radius:50%;border:1px solid #ece9e8;opacity:0;transition:all .3s}
.fixed_cursor .cursor .whole .bor{width:200%;height:200%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.2);border-radius:50%;border:1px solid #ece9e8;opacity:.3;transition:ease .5s}
.fixed_cursor .cursor .whole .bor.on{transform:translate(-50%,-50%) scale(1)}
.fixed_cursor .cursor .whole .bor.hide{opacity:0}
.fixed_cursor .cursor .whole.on:after{transform:scale(.5)}
.fixed_cursor .cursor .whole.on:before{opacity:.3;transform:translate(-50%,-50%) scale(1)}
.fixed_cursor .cursor .content_pro{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);cursor:pointer;opacity:0;transition:ease .3s;z-index:1}
.fixed_cursor .cursor .content_pro:after{content:'';position:absolute;width:100%;height:100%;top:0;left:0;border-radius:50%;background:#184dc4;z-index:-1;filter:blur(10px);transform:scale(1.1)}
.fixed_cursor .cursor .content_pro .cir{position:absolute;width:114px;height:114px;top:0;left:0;right:0;bottom:0;margin:auto;pointer-events:none;animation:ants 10s linear infinite}
.fixed_cursor .cursor .content_pro .text .end{transform:translateY(-3px);text-align:right}
.fixed_cursor .cursor .content_pro .text .end p{font-weight:700;font-size:13px;color:#ff8000}
.fixed_cursor .cursor .content_pro .text .end .overflow{width:22px;height:22px;display:flex;justify-content:center;align-items:center;overflow:hidden;margin:14px 0 0 31px}
.fixed_cursor .cursor .content_pro .text .end .iconfont{color:#fff;font-size:16px!important;font-weight:700!important;text-align:right;position:relative;left:5px;animation:arrowRun 5s infinite}
.fixed_cursor .small{width:6px;height:6px;border-radius:50%;background:#fff;position:fixed;top:-3px;left:-3px}
.fixed_cursor.cut .whole{opacity:0;transform:scale(0)}
.fixed_cursor.cut .content_pro{transform:translate(-50%,-50%) scale(1);opacity:1}
.fixed_cursor.fixed_cursor2{mix-blend-mode:unset}
.fixed_cursor.fixed_cursor2 .cursor{width:134px;height:134px}
body:hover .cursor{opacity:1}



// 鼠标事件
function MouseFollow() {
    let d = $('.cursor'),
        speed = d.attr('data-speed')

    speed === null ? speed = 0.9 : speed = speed / 10

    d && function (e) {
        gsap.set(e, {
            xPercent: -50,
            yPercent: -50
        });
        let t = e,
            r = {
                x: window.innerWidth / 2,
                y: window.innerHeight / 2
            },
            o = {
                x: r.x,
                y: r.y
            },
            a = gsap.quickSetter(t, "x", "px"),
            n = gsap.quickSetter(t, "y", "px");
        document.body.addEventListener("mousemove", e => {
            o.x = e.x, o.y = e.y
        }), gsap.ticker.add(() => {
            const e = 1 - Math.pow(speed, gsap.ticker.deltaRatio());
            r.x += (o.x - r.x) * e, r.y += (o.y - r.y) * e, a(r.x), n(r.y)
        })
    }(d)

    var mouseDownTime;

    function do_div() {
        var $generatedDiv = $('<div class="bor"></div>');
        $('.fixed_cursor .whole').append($generatedDiv);
        setTimeout(function () {
            $generatedDiv.addClass('on');
        }, 10)
        setTimeout(function () {
            $generatedDiv.addClass('hide');
            setTimeout(function () {
                $generatedDiv.remove()
            }, 300)
        }, 250);
    }

    $(document).on('mousedown', function () {
        mouseDownTime = new Date().getTime();
        $('.fixed_cursor .cursor .whole').addClass('on')
        do_div()
    });

    $(document).on('mouseup', function () {
        $('.fixed_cursor .cursor .whole').removeClass('on')
        var mouseUpTime = new Date().getTime();
        var timeDifference = mouseUpTime - mouseDownTime;
        if (timeDifference > 300) {
            do_div();
        }
    });

    $(document).on('mouseenter', '.public_hover .item .img,.public_hover .background,.item_hover', function () {
        $('.fixed_cursor').addClass('cut')
    })

    $(document).on('mouseleave', '.public_hover .item .img,.public_hover .background,.item_hover', function () {
        $('.fixed_cursor').removeClass('cut')
    })
}


MouseFollow();