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 0}return speed(this.to-this.from,this.speed,this.time,t)};Single.prototype.set=function(value,time){const now=new Date;const current=this.get(now);this.speed=this.getSpeed(now);this.start=now/1e3;this.from=current;this.to=value;if(time){this.time=time}return current};function Ola(values,time=300){if(typeof values==="number"){values={value:values}}each(values,(init,key)=>{const value=new Single(init,time/1e3);Object.defineProperty(values,"_"+key,{value:value});Object.defineProperty(values,"$"+key,{get:()=>value.to});Object.defineProperty(values,key,{get:()=>value.get(new Date),set:val=>value.set(val),enumerable:true})});Object.defineProperty(values,"get",{get:()=>(function(name="value",now=new Date){return this["_"+name].get(now)})});Object.defineProperty(values,"set",{get:()=>(function(values,time=0){each(values,(value,key)=>{this["_"+key].set(value,time/1e3)})})});return values}return Ola});
        
        document.querySelectorAll('.button').forEach((elem) => {
        
        	const canvas = elem.querySelector('.button__canvas')
        	const ctx = canvas.getContext('2d')
        	
        	const offset = 32
        	const background = '#ee.........完整代码请登录后点击上方下载按钮下载查看