js+css实现可配置炫酷输入框placeholder扫光走光动画效果代码-html代码-BFW代码库

js+css实现可配置炫酷输入框placeholder扫光走光动画效果代码

代码语言：html

代码描述：js+css实现可配置炫酷输入框placeholder扫光走光动画效果代码

代码标签： js css 可配置炫酷输入框 placeholder 扫光走光动画

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

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

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

  
  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
@import url('//repo.bfw.wiki/bfwrepo/css/normalize.min.css') layer(normalize);

@layer normalize, base, demo;

@layer demo {
  [data-style='classic'] {
    --chosen: var(--classic);
  }
  [data-style='flame'] {
    --chosen: var(--flame);
  }
  [data-style='aurora'] {
    --chosen: var(--aurora);
  }
  [data-style='change'] {
    --chosen: var(--changing);
  }

  :root {
    --start: 120;
    --end: 280;
  }

  @property --hue {
    initial-value: 10;
    syntax: '<number>';
    inherits: true;
  }

  [data-style='change'][data-debug='false'] {
    -webkit-animation: hue calc(var(--duration) * 0.5) infinite both linear;
            animation: hue calc(var(--duration) * 0.5) infinite both linear;
  }

  @-webkit-keyframes hue {
    0%,
    15% {
      --hue: 120;
    }
    85%,
    100% {
      --hue: 280;
    }
  }

  @keyframes hue {
    0%,
    15% {
      --hue: 120;
    }
    85%,
    100% {
      --hue: 280;
    }
  }

  [data-debug='true'] {
    --hue: calc(
      var(--end) +
        (
          clamp(0.15, var(--bg-position) / 100, 0.85) *
            (var(--start) - var(--end))
        )
    );
  }

  :root {
    --duration: calc((var(--multiplier, 0.2) * var(--placeholder-length)) * 2s);
    --place-color: light-dark(
      color-mix(in hsl, canvas, canvasText 20%),
      color-mix(in hsl, canvas, canvasText 20%)
    );
    --offset: calc(var(--bg-spread, 6) * 0.5ch);
    --angle: calc(var(--bg-angle) * 1deg);
    --flame: linear-gradient(
      var(--angle),
      #0000 calc(50% - var(--offset)),
      hsl(45 100% 60%) calc(50% - (var(--offset) - 0.5ch)),
      hsl(0 100% 50%),
      #0000 calc(50% + var(--offset))
    );
    --aurora: linear-gradient(
      var(--angle),
      #0000 calc(50% - var(--offset)),
      #a960ee,
      #ff333d,
      #ffcb57,
      #90e0ff,
      #0000 calc(50% + var(--offset))
    );
    --changing: linear-gradient(
      var(--angle),
      #0000 calc(50% - var(--offset)),
      hsl(var(--hue) 90% 60%).........完整代码请登录后点击上方下载按钮下载查看