js实现仿deepseek前端选择三维图形验证插件代码-html代码-BFW代码库

代码语言：html

所属分类：验证

代码描述：js实现仿deepseek前端选择三维图形验证代码，每次验证随机生成一组彩色 3D 几何体，并出题「颜色 × 形状 × 最大/最小」——和 DeepSeek 官网同款的点选式空间推理验证。

下面为部分代码预览，完整代码请点击下载或在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>ShapeGuard · 3D 几何体人机验证插件</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
<style>
/* ================= 演示页样式（浅色） ================= */
:root{
  --bg:#f1f4f9; --ink:#16233c; --mut:#5c6b82; --line:#e3e8f0;
  --blue:#2563eb; --teal:#14b8a6; --amber:#f59e0b; --red:#ef4444; --green:#22c55e;
  --disp:'Space Grotesk','PingFang SC','HarmonyOS Sans SC','Microsoft YaHei',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
}
*{box-sizing:border-box} html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--disp);min-height:100vh;overflow-x:hidden;line-height:1.6}
::selection{background:rgba(37,99,235,.25)}

.bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bg .glow{position:absolute;inset:0;background:
  radial-gradient(900px 560px at 8% -10%,rgba(37,99,235,.10),transparent 60%),
  radial-gradient(800px 560px at 96% 108%,rgba(20,184,166,.10),transparent 60%),
  radial-gradient(560px 380px at 78% -4%,rgba(245,158,11,.08),transparent 60%)}
.bg .gridlayer{position:absolute;inset:0;background-image:radial-gradient(rgba(90,110,150,.14) 1px,transparent 1.3px);background-size:24px 24px;
  -webkit-mask-image:radial-gradient(75% 70% at 50% 30%,#000 25%,transparent 100%);mask-image:radial-gradient(75% 70% at 50% 30%,#000 25%,transparent 100%)}
.fs{position:absolute;opacity:.5;animation:fsFloat 7s ease-in-out infinite;filter:drop-shadow(0 10px 14px rgba(30,50,90,.18))}
.fs.sphere{width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#ffd9a0,#ff8c1a 58%,#cf6400)}
.fs.cyl{width:36px;height:52px;border-radius:18px/12px;background:linear-gradient(90deg,#15803d,#4ade80 55%,#16a34a)}
.fs.cyl::before{content:'';position:absolute;top:-8px;left:0;right:0;height:18px;border-radius:50%;background:#6ee79a}
@keyframes fsFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-16px) rotate(3deg)}}
@media (prefers-reduced-motion:reduce){.fs{animation:none}}

.wrap{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:26px 22px 44px}
.reveal{opacity:0;transform:translateY(16px);animation:rise .7s cubic-bezier(.22,.7,.3,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}

.top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;gap:12px;align-items:center}
.brand>svg{filter:drop-shadow(0 6px 14px rgba(37,99,235,.25));animation:fsFloat 6s ease-in-out infinite}
.brand-name{font-weight:700;font-size:19px}
.ver{margin-left:8px;font:600 10.5px var(--mono);color:#b45309;border:1px solid rgba(245,158,11,.45);background:rgba(245,158,11,.08);padding:2px 7px;border-radius:99px;vertical-align:2px}
.brand-sub{font-size:12px;color:var(--mut)}
.tags{display:flex;gap:8px}
.tag{font-size:12px;color:#41506b;border:1px solid var(--line);padding:5px 12px;border-radius:99px;background:#fff}
.tag.teal{color:#0f766e;border-color:rgba(20,184,166,.4);background:rgba(20,184,166,.06)}

.intro{margin:32px 0 22px}
.intro h1{margin:0;font-size:clamp(24px,3.6vw,40px);line-height:1.25;font-weight:700}
.intro h1 em{font-style:normal;color:var(--blue)}
.intro p{margin:10px 0 0;color:var(--mut);max-width:660px;font-size:14.5px}

.grid2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px;align-items:start}
@media(max-width:920px){.grid2{grid-template-columns:1fr}}
.panel{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:0 18px 50px rgba(30.........完整代码请登录后点击上方下载按钮下载查看