js实现按钮悬浮鼠标跟随交互效果代码-html代码-BFW代码库

js实现按钮悬浮鼠标跟随交互效果代码

代码语言：html

所属分类：悬停

代码描述：js实现按钮悬浮鼠标跟随交互效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
        
        .hero-section {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
        body {
          height: 100vh;
          overflow: hidden;
        }
        
        .call-to-action-btn {
            padding: 15px 30px;
            border-radius: 50px;
            border: 2px solid black;
            background-color: transparent;
            font-weight: 400;
            font-family: "Poppins";
          font-size: 24px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        /* .call-to-action-btn:hover {
            color: white;
            background-color: black;
            transition: all 0.2s;
        } */
        
        .focus {
            color: white;
            background-color: black;
            transition: all 0.2s;
        }
        
        
        /*CREDIT*/
        .credit {
          position: absolute;
          bottom: 0;
          display: flex;
          justify-content: center;
          width: 100%;
          padding: 24px 0;
        }
        
        .credit a {
          text-decoration: none;
          color: inherit;
          font-family: "poppins";
        }
        
        span {
          font-weight: 600;
        }
    </style>



</head>

<body>
  <section class="hero-section">
  <button class="call-to-action-btn">Hello World</button>
</section>






    <script>
        const lerp = (current, target, factor) =>
        current * (1 - factor) + target * factor;
        
        let mousePosition = { x: 0, y: 0 };
        window.addEventListener("mousemove", e => {
          mousePosition.x = e.pageX;
          mousePosition.y = e.pageY;
        });
        
        const calculateDistance = (x1, y1, x2, y2) => {
          return Math.hypot(x1 - x2, y1 - y2);
        };
        
        // ------------------------------------------------------------------------
        class MagneticObject {
          constr.........完整代码请登录后点击上方下载按钮下载查看