gsap实现可调参数的炫酷按钮背景彩色线条动画代码-html代码-BFW代码库

gsap实现可调参数的炫酷按钮背景彩色线条动画代码

代码语言：html

所属分类：动画

代码描述：gsap实现可调参数的炫酷按钮背景彩色线条动画代码

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

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

<head>
  <meta charset="UTF-8">
  

  <meta
      name="viewport"
      content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1.0"
    />
    <title>number-picker-exploration</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
  
  
  
<style>
@import url('https://unpkg.com/normalize.css') layer(normalize);

@layer normalize, base, demo;

@layer base {
  .arrow {
    font-family: 'Gloria Hallelujah', cursive;
    font-size: 0.875rem;
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 0.7;
    rotate: 10deg;
    transition: opacity 0.26s ease-out;
    pointer-events: none;
    line-height: 1.5;
    translate: 150% 120px;

    span {
      white-space: nowrap;
    }
    svg {
      bottom: calc(100% + 10px);
      position: absolute;
      rotate: 80deg;
      translate: -50% 0;
      scale: -1 -1;
      left: 0;
      width: 60px;
    }
  }
  :root {
    --font-size-min: 16;
    --font-size-max: 20;
    --font-ratio-min: 1.2;
    --font-ratio-max: 1.33;
    --font-width-min: 375;
    --font-width-max: 1500;
  }

  html {
    color-scheme: light dark;
  }

  [data-theme='light'] {
    color-scheme: light only;
  }

  [data-theme='dark'] {
    color-scheme: dark only;
  }

  :where(.fluid) {
    --fluid-min: calc(
      var(--font-size-min) * pow(var(--font-ratio-min), var(--font-level, 0))
    );
    --fluid-max: calc(
      var(--font-size-max) * pow(var(--font-ratio-max), var(--font-level, 0))
    );
    --fluid-preferred: calc(
      (var(--fluid-max) - var(--fluid-min)) /
        (var(--font-width-max) - var(--font-width-min))
    );
    --fluid-type: clamp(
      (var(--fluid-min) / 16) * 1rem,
      ((var(--fluid-min) / 16) * 1rem) -
        (((var(--fluid-preferred) * var(--font-width-min)) / 16) * 1rem) +
        (var(--fluid-preferred) * var(--variable-unit, 100vi)),
      (var(--fluid-m.........完整代码请登录后点击上方下载按钮下载查看