0

我偶然发现了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>
4

0 回答 0