自定义光标，缓慢跟随鼠标移动，快速移动时略微扭曲

问题描述

我访问了 Jonathan 的网站，并注意到光标后面的圆圈会缓慢地跟踪它，并且在快速滑动时会略微扭曲 （最好快速浏览一下网站并移动游标周围，有点难以解释）。
我知道如何创建自定义光标，但不知道如何让它缓慢跟踪实际光标并稍微扭曲。

这里有没有人有这方面的经验或知道如何创建这样的东西？

这是一个圆形光标的代码（CSS,jQuery and HTML）：

body {
    background-color: #fff;
}

.cursor {
    position: fixed;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid rgb(80,80,80);
    pointer-events: none;
    z-index: 999;
}

$(document).ready(function(){
      var cursor = $(".cursor");
      
          $(window).mousemove(function(e) {
              cursor.css({
                  top: e.clientY - cursor.height() / 2,left: e.clientX - cursor.width() / 2
              });
          });
      
          $(window)
              .mouseleave(function() {
                  cursor.css({
                      opacity: "0"
                  });
              })
              .mouseenter(function() {
                  cursor.css({
                      opacity: "1"
                  });
              });
      
          $(".link")
              .mouseenter(function() {
                  cursor.css({
                      transform: "scale(3.2)"
                  });
              })
              .mouseleave(function() {
                  cursor.css({
                      transform: "scale(1)"
                  });
              });
      
          $(window)
              .mousedown(function() {
                  cursor.css({
                      transform: "scale(.2)"
                  });
              })
              .mouseup(function() {
                  cursor.css({
                      transform: "scale(1)"
                  });
              });
      });

<!DOCTYPE html>
<html>
    <head>
        <script src="/src/js/lib/jquery-3.5.1.min.js"></script>
    </head>
    <body>
        <div class="cursor"></div>
    </body>
</html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

custom-cursor html javascript jquery