js+css实现液态按钮悬浮交互动画效果代码-html代码-BFW代码库

js+css实现液态按钮悬浮交互动画效果代码

代码语言：html

所属分类：悬停

代码描述：js+css实现液态按钮悬浮交互动画效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">

  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Droid+Sans:700'>
<style>
    body {
        display: flex;
        height: 100vh;

        align-items: center;
        justify-content: center;
}

.btn-liquid {
        display: inline-block;
        position: relative;
        width: 240px;
        height: 60px;

        border-radius: 27px;

        color: #fff;
        font: 700 14px/60px "Droid Sans", sans-serif;
        letter-spacing: 0.05em;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
}

.btn-liquid .inner {
        position: relative;

        z-index: 2;
}

.btn-liquid canvas {
        position: absolute;
        top: -50px;
        right: -50px;
        bottom: -50px;
        left: -50px;

        z-index: 1;
}
</style>

</head>
<body>
<!-- partial:index.partial.html -->
<a href="" class="btn-liquid">
                <span class="inner">Liquid button ?</span>
</a>
<!-- partial -->
 <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script><script >
      $(function() {
        // Vars
        var pointsA = [],
                pointsB = [],
                $canvas = null,
                canvas = null,
                context = null,
                vars = null,
                points = 8,
                viscosity = 20,
                mouseDist = 70,
                damping = 0.05,
                showIndicators = false;
                mouseX = 0,
                mouseY = 0,
                relMouseX = 0,
                relMouseY = 0,
                mouseLastX = 0,
                mouseLastY = 0,
                mouseDirectionX = 0,
                mouseDirectionY = 0,
                mouseSpeedX = 0,
                mouseSpeedY = 0;

        /**
         * Get mouse direction
         */
        function mouseDirection(e) {
                if (mouseX < e.pageX)
                        mouseDirectionX = 1;
                else if (mouseX > e.pageX)
                        mouseDirectionX = -1;
                else
                        mouseDirectionX = 0;

                if (mouseY < e.pageY)
                        mouseDirectionY = 1;
                else if (mouseY > e.pageY)
                        mouseDirectionY = -1;
                else
                        mouseDirectionY = 0;

                mouseX = e.pageX;
                mouseY = e.pageY;

                relMouseX = (mouseX - $canvas.offset().left);
                relMouseY = (mouseY - $canvas.offset().top);
        }
        $(document).on('mousemove', mouseDirection);

        /**
         * Get mouse speed
         */
        function mouseSpeed() {
                mouseSpeedX = mouseX - mouseLastX;
                mouseSpeedY = mouseY - mouseLastY;

                mouseLastX = mouseX;
                mouseLastY = mouseY;

                setTimeout(mouseSpeed, 40);
        }
        mouseSpeed();

        /**
         * Init button
         */
        function initButton() {
                // Get button
                var button = $('.btn-liquid');
                var buttonWidth = button.width();
                var buttonHeight = button.height();

                // Create canvas
                $canvas = $('<canvas></canvas>');
                button.append($canvas);

                canvas = $canvas.get(0);
                canvas.width = buttonWidth+100;
                ca.........完整代码请登录后点击上方下载按钮下载查看