css实现一个简洁步进器steper控件选择数值效果代码-html代码-BFW代码库

css实现一个简洁步进器steper控件选择数值效果代码

代码语言：html

所属分类：选择器

代码描述：css实现一个简洁步进器steper控件选择数值效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
   
        @keyframes float {
          to {
            transform: translateY(0.75em);
          }
        }
        body, div, label {
          display: grid;
        }
        
        body {
          margin: 0;
          min-height: 100vh;
          background: whitesmoke;
        }
        
        form {
          place-self: center;
          overflow: hidden;
          width: 4em;
          border-radius: 0.75em;
          box-shadow: 0 3rem 6rem rgba(13, 13, 13, 0.2);
          background: #333333;
          font: 600 6.5em ubuntu, sans-serif;
          transition: transform 0.25s;
          pointer-events: none;
        }
        form:active {
          transform: scale(0.85);
        }
        
        [role=group] {
          align-content: center;
          height: 2em;
          transform: translate(calc((.5 - var(--k))*2em));
          transition: inherit;
        }
        
        [type=radio] {
          z-index: 2;
          opacity: 0;
        }
        [type=radio], [type=radio] + label {
          grid-area: 1/calc(var(--i) + 1);
        }
        [type=radio] + label {
          --dif: calc(var(--i) - var(--k));
          --sgn: clamp(-1, var(--dif), 1);
          --not-sel: min(1, max(-1*var(--dif), var(--dif)));
          place-content: center;
          width: 2em;
          height: 4em;
          transform-origin: calc(50%*(1 - var(--sgn)));
          transform: scale(calc(1 - var(--not-sel)*.5));
          color: hsl(0, 0%, calc(100% - var(--not-sel)*57%));
          transition: inherit;
          user-select: none;
          cursor: pointer;
        }
        [type=radio]:not(:checked) + label {
          pointer-events: auto;
        }
    </style>



</head>

<body>
    <form>
        <div role="group" aria-label="value picker" style="--n: 20; --k: 10">
            <input type="radio" name="o" id="o0" style="--i: 0" />
            <label for="o0" style="--i: 0">0</label>
            <input type="radio" name="o" id="o1" style="--i: 1" />
            <label for="o1" style="--i: 1">1</label>
            <input type="radio" name="o" id="o2" style="--i: 2" />
            <label for="o2" style="--i: 2">2</label>
            <input type="radio" name="o" id="o3" style="--i: 3" />
            <label for="o3" style="--i: 3">3</label>
            <input type="radio" name="o" id="o4" style="--i: 4" />
            <label for="o4" style="--i: 4">4</label>
            <input type="radio" name="o" id="o5" style="--i: 5" />
            <label for="o5" sty.........完整代码请登录后点击上方下载按钮下载查看