js实现果冻液态悬浮交互动画文字按钮链接效果代码-html代码-BFW代码库

js实现果冻液态悬浮交互动画文字按钮链接效果代码

代码语言：html

所属分类：悬停

代码描述：js实现果冻液态悬浮交互动画文字按钮链接效果代码，鼠标放上去试试看。

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
    html,body {
        margin:50px;
        padding:0;
        background:#38277F
}
canvas {
        position:absolute;
        top:50%;
        left:50%;
        -webkit-transform:translate(-50%,-50%);
        transform:translate(-50%,-50%);
        z-index:-1
}
.button {
        background:0;
        padding:20px;
        border-radius:50px;
        position:relative;
        margin-top:5px;
        display:inline-block;
        font-family:'Glamour Absolute',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;
        color:white;
        text-decoration:none;
        z-index:2;
        font-weight:100;
        font-size:30px;
        letter-spacing:1px;
        margin:50px
}

</style>
</head>

<body><a class="button" href="" data-text="hey">bfw.wiki </a><a class="button" href="" data-text="hey">Buy now!$10 </a><a class="button" href="http://bootstrap.com" data-text="hey">small </a><a class="button"
        href="" data-text="hey">A Really Long button with text </a>
    <!-- partial -->
    <script>
        const LiquidButton = class LiquidButton {
  constructor(button) {
    const { width, height } = button.getBoundingClientRect();
    const buttonStyles = window.getComputedStyle(button);
    console.log();
    const options = button.dataset || {};

    this.font = `${buttonStyles['font-size']} ${buttonStyles['font-family']}`;
    console.log(this.font);
    this.tension = options.tension || 0.4;
    this.width = width;
    this.height = height;
    this.margin = options.margin || 50;
    // assume the padding it the same all around
    this.padding = parseFloat(buttonStyles.paddingRight);
    this.hoverFactor = options.hoverFactor || 0.5;
    this.gap = options.gap || 5;
    this.debug = options.debug || false;
    this.forceFactor = options.forceFactor || 0.2;
    // this.color1 = options.color1 || '#36DFE7';
    // this.color2 = options.color2 || '#8F17E1';
    // this.color3 = options.color3 || '#E509E6';
    this.color1 = options.color1 || '#ffc600';
    this.color2 = options.color2 || '#8F17E1';
    this.color3 = options.color3 || '#E509E6';
    this.textColor = buttonStyles.color || '#FFFFFF';
    this.layers = [{
      points: [],
      viscosity: 0.5,
      mouseForce: 100,
      forceLimit: 2 },
    {
      points: [],
      viscosity: 0.8,
      mouseForce: 150,
      forceLimit: 3 }];

    this.text = button.textContent;
    this.canvas = options.canvas || document.createElement('canvas');
    this.context = this.canvas.getContext('2d');
    // this.wrapperElement = options.wrapperElement || document.body;
    // if (!this.canvas.parentElement) {
    //   this.wrapperElement.append(this.canvas);
    // }
    button.append(this.canvas);
    this.touches = [];
    this.noise = options.noise || 0;
    button.addEventListener('mousemove', this.mousemove);
    button.addEventListener('mouseout', this.mouseout);
    this.initOrigins();
    this.animate();
    this.restingFace();
  }

  restingFace() {
    // force a mouse move on each button
    this.mousemove({ offsetX: Math.random() * this.width, offsetY: 1 });
  }

  get mousemove() {
    return e => {
      this.touches = [{
        x: e.offsetX,
        y: e.offsetY,
        z: 0,
        force: 1 }];

    };
  }

  get mouseout() {
    return e => {
      this.touches = [];
      this.restingFace();
    };
  }

  get raf() {
    return this.__raf || (thi.........完整代码请登录后点击上方下载按钮下载查看