js+css实现密码锁滚轮质感转盘图片验证码解锁代码-html代码-BFW代码库

js+css实现密码锁滚轮质感转盘图片验证码解锁代码

代码语言：html

所属分类：其他

代码描述：js+css实现密码锁滚轮质感转盘图片验证码解锁代码，每个转盘可鼠标滚轮滚动或拖拽选择数字

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>质感转轮密码锁验证码</title>
  <style>
    :root{
      --bg:#0f1318;
      --panel:#151a21;
      --accent:#3aa2ff;
      --ok:#43d17c;
      --warn:#ffb74d;
      --text:#e9eef7;
      --muted:#9aa5b1;

      --lock-metal-1:#bfc7d3;
      --lock-metal-2:#9097a4;
      --lock-metal-3:#666c78;

      --wheel-size:96px;
      /* 【修改】调整窗口尺寸为正方形，以确保是完美的圆形 */
      --window-width:44px;
      --window-height:44px;
    }

    *{box-sizing:border-box}
    html,body{
      height:100%;
      background:
        radial-gradient(1200px 700px at 50% 10%, #12161d 20%, #0d1015 60%, #080b0f 100%),
        var(--bg);
      color:var(--text);
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
      margin:0;
    }

    .wrap{
      min-height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:40px 20px;
    }

    .card{
      width:min(920px, 92vw);
      background:linear-gradient(180deg, #161b22 0%, #12161d 100%);
      border-radius:20px;
      box-shadow:
        0 10px 40px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.05);
      border:1px solid rgba(255,255,255,0.06);
      padding:26px 26px 32px;
    }

    .title{
      font-weight:600;
      font-size:20px;
      letter-spacing:0.3px;
      display:flex;
      align-items:center;
      gap:10px;
      margin:0 0 14px 0;
    }
    .title .dot{
      width:10px; height:10px; border-radius:50%;
      background:var(--accent);
      box-shadow:0 0 12px rgba(58,162,255,0.8);
    }
    .subtitle{
      color:var(--muted);
      font-size:14px;
      margin-bottom:18px;
    }

    .captcha-area{
      display:grid;
      grid-template-columns: 1fr auto;
      gap:18px;
      align-items:center;
    }

    .captcha-box{
      justify-self:center;
      background:#0b0f14;
      border-radius:14px;
      padding:16px;
      border:1px solid rgba(255,255,255,0.08);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,0.02);
    }
    canvas{
      display:block;
      border-radius:12px;
    }

    .refresh-btn{
      align-self:start;
      padding:10px 14px;
      background:linear-gradient(180deg, #1c222b, #121720);
      border:1px solid rgba(255,255,255,0.08);
      color:var(--text);
      border-radius:12px;
      cursor:pointer;
      font-weight:600;
      transition:transform .08s ease, box-shadow .2s ease, border-color .2s;
    }
    .refresh-btn:hover{ border-color:rgba(58,162,255,0.35); box-shadow:0 8px 20px rgba(58,162,255,0.12)}
    .refresh-btn:active{ transform:scale(0.98) }

    .lock{
      margin-top:22px;
      background:linear-gradient(180deg, #161b22, #0f1318);
      border-radius:16px;
      padding:18px 18px 22px;
      border:1px solid rgba(255,255,255,0.06);
      position:relative;
      overflow:hidden;
    }

    /* Lock body metal effect */
    .lock::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(130deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 40%),
        radial-gradient(600px 230px at 30% -10%, rgba(255,255,255,0.08), transparent 60%),
        radial-gradient(600px 240px at 80% 110%, rgba(255,255,255,0.06), transparent 60%);
      pointer-events:none;
    }

    .lock-head{
      display:f.........完整代码请登录后点击上方下载按钮下载查看