js实现按钮悬浮液态液体流动动画效果代码-html代码-BFW代码库

js实现按钮悬浮液态液体流动动画效果代码

代码语言：html

所属分类：悬停

代码描述：js实现按钮悬浮液态液体流动动画效果代码

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

<html>

<head>
    <style>
        body {
          display: flex;
          justify-content: center;
          align-items: center;
          min-height: 100vh;
          background: #eef;
        }
        
        .button {
          position: relative;
          padding: 1.6em 2.8em;
          text-decoration: none;
        }
        .button__canvas {
          --offset: 32px;
          position: absolute;
          top: calc(var(--offset) * -1);
          left: calc(var(--offset) * -1);
          width: calc(100% + var(--offset) * 2);
          height: calc(100% + var(--offset) * 2);
          transition: opacity 2s ease;
        }
        .button__text {
          position: relative;
          color: white;
          font-weight: bold;
          letter-spacing: 0.02em;
          pointer-events: none;
        }
        .button:hover .button__canvas {
          opacity: 0.85;
          transition: opacity 0.2s ease;
        }
        .button:active .button__canvas {
          opacity: 1;
          transition: none;
        }
    </style>
 
</head>

<body>
    <a href="#" class="button">
        <canvas class="button__canvas" width="329" height="136".........完整代码请登录后点击上方下载按钮下载查看