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"></canvas>
        <span class="button__text">Hover me I am liquid</span>
    </a>
    <script>
        (function(global,factory){typeof exports==="object"&&typeof module!=="undefined"?module.exports=factory():typeof define==="function"&&define.amd?define(factory):(global=global||self,global.Ola=factory())})(this,function(){"use strict";const position=(x0,v0,t1,t)=>{const a=(v0*t1+2*x0)/t1**3;const b=-(2*v0*t1+3*x0)/t1**2;const c=v0;const d=x0;return a*t**3+b*t**2+c*t+d};const speed=(x0,v0,t1,t)=>{const a=(v0*t1+2*x0)/t1**3;const b=-(2*v0*t1+3*x0)/t1**2;const c=v0;return 3*a*t**2+2*b*t+c};const each=function(values,cb){const multi=typeof values==="number"?{value:values}:values;Object.entries(multi).map(([key,value])=>cb(value,key))};function Single(init,time){this.start=new Date/1e3;this.time=time;this.from=init;this.current=init;this.to=init;this.speed=0}Single.prototype.get=function(now){const t=now/1e3-this.start;if(t<0){throw new Error("Cannot read in the past")}if(t>=this.time){return this.to}return this.to-position(this.to-this.from,this.speed,this.time,t)};Single.prototype.getSpeed=function(now){const t=now/1e3-this.start;if(t>=this.time){return .........完整代码请登录后点击上方下载按钮下载查看