js+css实现可调配置的物理键盘注册落地页代码-html代码-BFW代码库

js+css实现可调配置的物理键盘注册落地页代码

代码语言：html

所属分类：其他

代码描述：js+css实现可调配置的物理键盘注册落地页代码，带音效，可修改颜色和文字。

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

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

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

  
  
<style>


@layer normalize, base, demo, debug, exploding;

@layer exploding {
  [data-exploded='true'] {
    section {
      transition-delay: 0s;
    }
    .keypad {
      translate: calc(-50% - 1rem) 0;
      transition-delay: 0s, 0.26s;
      @media (max-width: 768px) {
        translate: 0 calc(50% + 1rem);
      }
    }
    .keypad__base {
      --depth: 2.5;
    }
    .keypad__single {
      --depth: -1;
    }
    .keypad__single--left {
      --depth: -2;
    }
    .keypad__double {
      --depth: 0;
    }

    .keypad__base,
    .key {
      translate: 0 calc(var(--depth) * 10vh);
      transition-delay: 0.52s;
    }
  }

  .keypad {
    transition-delay: 0.26s, 0.52s;
  }

  .key,
  .keypad__base {
    transition-property: translate;
    transition-duration: 0.26s;
    transition-timing-function: ease-out;
  }

  [data-exploded='true'] .key::after {
    opacity: 1;
    transition-delay: 0.52s;
  }

  .key::after {
    z-index: -1;
    content: '';
    position: absolute;
    opacity: 0;
    inset: 0;
    transition-property: opacity;
    transition-duration: 0.26s;
    transition-timing-function: ease-out;
    background: repeating-linear-gradient(
      -45deg,
      #0000 0 5px,
      hsl(220 100% 70%) 5px 6px
    );
  }
  /* timings */
}

@layer debug {
  main {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
    justify-content: center;

    h1 {
      letter-spacing: -0.05rem;
      line-height: 1;
    }

    p {
      opacity: 0.7;
      font-weight: 300;
    }

    form {
      display: flex;
      gap: 0.5rem;

      input {
        flex: 1;
        padding: 0.5rem 0.75rem;
        background: canvas;
        border: 1px solid color-mix(in oklch, canvasText, #0000 75%);
        border-radius: 6px;
        outline-color: red;
      }

      button {
        padding-inline: 1.5rem;
        border-radius: 6px;
        background: canvas;
        border: 1px solid color-mix(in oklch, canvasText, #0000 75%);
        cursor: pointer;
        color: canvasText;
        font-size: 0.875rem;
      }
    }

    section {
      transition-property: opacity, filter;
      transition-duration: 0.26s;
      transition-delay: 0.26s;
      transition-timing-function: ease-out;
    }
  }

  [data-exploded='true'] section {
    opacity: 0;
    filter: blur(4px);
  }

  @media (max-width: 768px) {
    .keypad {
      order: 1;
    }
    section {
      order: 2;
    }
  }

  section,
  section > div {
    width: 50ch;
    max-width: calc(100vw - 2rem);
  }
}

@layer demo {
  :root {
    --travel: 20;
  }
  .keypad .........完整代码请登录后点击上方下载按钮下载查看