流体按钮悬浮动画效果-html代码-BFW代码库

代码语言：html

所属分类：悬停

代码描述：流体按钮悬浮动画效果

下面为部分代码预览，完整代码请点击下载或在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: none;
  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;
  /* border: 1px solid red; */
  z-index: 2;
  font-weight: 100;
  font-size: 30px;
  letter-spacing: 1px;
  margin: 50px;
}
</style>



</head>

<body translate="no" >
  <!-- Forked From https://codepen.io/Zaku/pen/JNxKKY?editors=0100 -->

  <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="#" data-text="hey">
    small
  </a>
  <a class="button" href="#" data-text="hey">
    A Really Long button with text
  </a>

  
      <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 || (this.__raf = (
    window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    function (callback) {setTimeout(callback, 10);}).
    bind(window));
  }

  distance(p1, p2) {
    return Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
  }

  update() {
    for (let layerIndex = 0; layerIndex < this.layers.length; layerIndex++) {
      const layer = this.layers[layerIndex];
      const points = layer.points;
      for (let pointIndex = 0; pointIndex < points.length; pointIndex++) {
        const point = points[pointIndex];
        const dx = point.ox - point.x + (Math.random() - 0.5) * this.noise;
        const dy = point.oy - point.y + (Math.random() - 0.5) * this.noise;
        const d = Math.sqrt(dx * dx + dy * dy);
        const f = d * this.forceFactor;
        point.vx += f * (dx / d || 0);
        point.vy += f * (dy / d || 0);
        for (let touchIndex = 0; touchIndex < this.touches.length; touchIndex++) {
          const touch = this.touches[touchIndex];
          let mouseForce = layer.mouseForce;
          if (
          touch.x > this.margin &&
          touch.x < this.margin + this.width &&
          touch.y > this.margin &&
          touch.y < this.margin + this.height)
          {
            mouseForce *= -this.hoverFactor;
          }
          const mx = point.x - touch.x;
          const my = point.y - touch.y;
          const md = Math.sqrt(mx * mx + my * my);
          const mf = Math.max(-layer.forceLimit, Math.min(layer.forceLimit, mouseForce * touch.force / md));
          point.vx += mf * (mx / md || 0);
          point.vy += mf * (my / md || 0);
        }
        point.vx *= layer.viscosity;
        point.vy *= la.........完整代码请登录后点击上方下载按钮下载查看