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

代码语言：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%),
      #0000 calc(50% + var(--offset))
    );
    --classic: linear-gradient(
      var(--angle),
      #0000 calc(50% - var(--offset)),
      canvasText,
      #0000 calc(50% + var(--offset))
    );
    --bg: var(--chosen) 0 0 / 300% 100% no-repeat border-box,
      linear-gradient(var(--place-color), var(--place-color)) padding-box;
  }

  .wrap input {
    width: 290px;
    max-width: calc(100vw - 2rem);
  }

  .wrap {
    --font-level: 0;
    --font-size-min: 14;
    --font-size-max: 22;
    font-weight: 500;
    font-family: 'Ubuntu', sans-serif;
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 2rem;
  }

  .wrap :is(.debugger, .placeholder, input) {
    padding: 16px;
    border-radius: 12px;
  }

  .wrap :is(.debugger, .placeholder) {
    border: 2px solid #0000;
    background: var(--bg);
    position: absolute;
    height: 100%;
    width: 100%;
    pointer-events: none;
    transition: top 0.2s, bottom 0.2s;
  }

  input::-moz-placeholder {
    font-weight: 500;
    -moz-transition: opacity 0.2s;
    transition: opacity 0.2s;
  }

  input:-ms-input-placeholder {
    font-weight: 500;
    -ms-transition: opacity 0.2s;
    transition: opacity 0.2s;
  }

  input::placeholder {
    font-weight: 500;
    transition: opacity 0.2s;
  }

  .debugger {
    top: 0;
  }
  .placeholder {
    bottom: 0;
  }

  .placeholder::before,
  .placeholder::after {
    opacity: 0;
  }

  .placeholder::before {
    content: attr(data-placeholder);
    background: var(--bg);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    position: absolute;
    inset: 0;
    padding: 1rem;
  }

  [data-bordered='true'] .placeholder::after {
    content: '';
    border: 2px solid #0000;
    position: absolute;
    inset: -2px;
    border-radius: 12px;
    background: var(--bg);
    -webkit-mask: linear-gradient(#0000, #0000) padding-box,
      linear-gradient(#fff, #fff) border-box;
            mask: linear-gradient(#0000, #0000) padding-box,
      linear-gradient(#fff, #fff) border-box;
    -webkit-mask-composite: source-in, xor;
            mask-composite: intersect;
    transition: opacity 0.2s;
  }

  [data-debug='false'] .wrap input::-moz-placeholder {
    opacity: 0;
  }

  [data-debug='false'] .wrap input:-ms-input-placeholder {
    opacity: 0;
  }

  [data-debug='false'] .wrap input::placeholder {
    opacity: 0;
  }

  [data-debug='false'] input:-moz-placeholder-shown + .placeholder::after, [data-debug='false'] input:-moz-placeholder-shown + .placeholder::before {
    opacity: 1;
  }

  [data-debug='false'] input:-ms-input-placeholder + .placeholder::after, [data-debug='false'] input:-ms-input-placeholder + .placeholder::before {
    opacity: 1;
  }

  [data-debug='true'] .placeholder::after,
  [data-debug='true'] .placeholder::before,
  [data-debug='false'] input:placeholder-shown + .placeholder::after,
  [data-debug='false'] input:placeholder-shown + .placeholder::before {
    opacity: 1;
  }

  [data-debug='true'] .debugger {
    top: calc(100% + 2rem);
  }
  [data-debug='true'] .placeholder {
    bottom: calc(100% + 2rem);
  }

  .debugger {
    z-index: -1;
  }

  .wrap input {
    background: light-dark(#fff, #000);
    border: 2px solid var(--place-color);
    outline: none;
    outline-color: #0000;
    
    &::-moz-selection {
      background-color: red;
      color: white;
    }
    
    &::selection {
      background-color: red;
      color: white;
    }

    &::-moz-placeholder {
      color: var(--place-color);
    }

    &:-ms-input-placeholder {
      color: var(--place-color);
    }

    &::placeholder {
      color: var(--place-color);
    }
    &:focus-visible {
      outline-color: #0000;
    }
  }

  [data-debug='false'] .placeholder::before,
  [data-debug='false'] .placeholder::after {
    -webkit-animation: shimmer var(--duration) infinite both ease-in-out;
            animation: shimmer var(--duration) infinite both ease-in-out;
  }

  .labels {
    opacity: 0;
    filter: blur(4px);
    position: absolute;
    display: flex;
    flex-direction: column;
    right: calc(100% + 2rem);
    top: 50%;
    translate: 0 -50%;
    gap: 2rem;
    font-weight: 300;
    transition: opacity 0.2s, filter 0.2s;
  }

  [data-debug='true'] .labels {
    opacity: 1;
    filter: blur(0px);
  }

  .label {
    padding-block: 1.1rem;
    font-size: 0.8rem;
    opacity: 0.5;
  }

  @-webkit-keyframes shimmer {
    0% {
      background-position: 100% 0;
    }
    50%,
.........完整代码请登录后点击上方下载按钮下载查看