gsap+svg实现上下翻转动画数值步进器组件代码-html代码-BFW代码库

gsap+svg实现上下翻转动画数值步进器组件代码

代码语言：html

代码描述：gsap+svg实现上下翻转动画数值步进器组件代码

下面为部分代码预览，完整代码请点击下载或在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, debug;

@layer debug {
  .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: 25% 130px;

    span {
      white-space: nowrap;
    }
    svg {
      bottom: calc(100% + 10px);
      position: absolute;
      rotate: 80deg;
      translate: -50% 0;
      scale: -1 -1;
      left: 0;
      width: 60px;
    }
  }
  
  main {
    scale: 1;
  }
}

@layer demo {
  quantity-picker {
    --accent: hsl(26 100% 65%);
    display: inline-flex;
    scale: 1;
    align-items: center;
    gap: 0;
    position: relative;
    height: 36px;
    line-height: 36px;
    border-radius: 6px;
    font-size: 1rem;
    color: light-dark(hsl(0 0% 30%), #fff);
    /* overflow: hidden; */

    transition: translate 0.12s ease-out;
    background: linear-gradient(light-dark(#fff, #000) 0 100%) padding-box;
    outline: 1px solid light-dark(color-mix(in hsl, #000, #0000 90%), color-mix(in hsl, #fff, #0000 50%));
    box-shadow: 0 2px 10px -2px hsl(0 0% 0% / 0.2);

    &:active {
      translate: 0 1px;
    }

    &::after {
      content: '';
      pointer-events: none;
      position: absolute;
      inset: -1px;
      border: 1px solid hsl(0 100% 60%);
      z-index: 20;
      border-radius: 7px;
      opacity: 0;
    }

    &:has(input:invalid:not(:focus-visible)):not(:focus-within) {
      -webkit-animation: shake 0.42s .........完整代码请登录后点击上方下载按钮下载查看