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,maximum-scale=1,viewport-fit=cover">
<title>验证码 · 转轮密码锁</title>
<style>
  :root{
    --bg-0: #0b0e12;
    --bg-1: #11151b;
    --card: #151a21;
    --accent: #5bd1ff;
    --accent-2: #59f39a;
    --warn: #ff7a7a;
    --text: #e8eef7;
    --muted: #9aa6b2;
    --step: 56px;  /* 每一格数字高度 */
    --wheel-h: 120px; /* 单个转轮可视高度 */
    --wheel-w: 64px;  /* 单个转轮宽度 */
  }

  *{ box-sizing:border-box; }
  html,body{
    height:100%;
    background:
      radial-gradient(1200px 800px at 75% -10%, #17202a 0%, transparent 60%),
      radial-gradient(800px 600px at -10% 100%, #0f141a 0%, transparent 60%),
      linear-gradient(180deg, var(--bg-0), var(--bg-1));
    color:var(--text);
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  a { color: var(--accent); text-decoration: none; }

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

  .card{
    width:min(920px, 92vw);
    background:
      radial-gradient(100% 100% at 50% 0%, rgba(255,255,255,0.04), transparent 70%),
      linear-gradient(180deg, #171c22, #12161b);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:18px;
    box-shadow:
      0 30px 70px rgba(0,0,0,0.45),
      inset 0 1px 0 rgba(255,255,255,0.05),
      inset 0 -1px 0 rgba(0,0,0,0.35);
    padding:28px 28px 24px;
  }

  .title{
    display:flex; align-items:center; gap:10px; margin-bottom:16px;
  }
  .title h1{
    font-size:20px; margin:0; font-weight:700; letter-spacing:0.2px;
  }
  .title .sub{
    color:var(--muted); font-size:13px;
  }

  .stage{
    display:flex; flex-direction:column; align-items:center; gap:18px;
  }

  .captcha-area{
    display:flex; gap:14px; align-items:center; justify-content:center; flex-wrap:wrap;
  }

  .canvas-wrap{
    position:relative;
    display:inline-flex; align-items:center; justify-content:center;
    padding:12px;
    border-radius:14px;
    background:
      radial-gradient(150% 140% at 0% 0%, rgba(255,255,255,0.05), transparent 40%),
      linear-gradient(180deg, #0f1318, #0c1014);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.05),
      0 8px 30px rgba(0,0,0,0.45);
    border:1px solid rgba(255,255,255,0.06);
  }
  canvas#captcha{
    display:block;
    border-radius:10px;
    background:#e9eef5;
  }

  .btns{
    display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:center;
  }
  .btn{
    appearance:none; border:0; cursor:pointer;
    padding:10px 14px;
    border-radius:10px;
    font-weight:600; letter-spacing:0.2px;
    background: linear-gradient(180deg, #232a33, #161c23);
    color:#dfe8f2;
    border:1px solid rgba(255,255,255,0.06);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      0 6px 20px rgba(0,0,0,0.35);
    transition: all .2s ease;
  }
  .btn:hover{ transform: translateY(-1px); }
  .btn.primary{
    background: linear-gradient(180deg, #29a1ff, #1a78ff);
    border-color: rgba(13, 74, 255, 0.5);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.3),
      0 10px 30px rgba(30, 122, 255, 0.45);
    color:#fff;
  }
  .btn.success{
    background: linear-gradient(180deg, #32d27a, #0fb86a);
    border-color: rgba(5, 180, 110, 0.6);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.35),
      0 10px 30px rgba(27, 220, 142, 0.45);
  }
  .btn:disabled{
    opacity:.6; cursor: not-allowed; transform:none;
  }

.........完整代码请登录后点击上方下载按钮下载查看