js实现拖拽旋转立方体人机验证前端插件和调用代码-html代码-BFW代码库

代码语言：html

所属分类：验证

代码描述：js实现拖拽旋转立方体人机验证前端插件和调用代码

下面为部分代码预览，完整代码请点击下载或在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>CubeCaptcha · 立方体验证插件</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>
/* ============================================================
   页面样式（演示外壳）——插件自身样式由 JS 自动注入，便于移植
   ============================================================ */
:root{
  --bg:#070b15; --panel-a:rgba(18,27,50,.82); --panel-b:rgba(11,17,34,.86);
  --line:rgba(148,163,184,.14); --ink:#e9effd; --mut:#8ea0bf;
  --blue:#3d7bfd; --teal:#22d3c5; --amber:#ffb454; --coral:#ff6f61; --green:#34d399;
  --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(61,123,253,.4)}

/* ---- 背景层 ---- */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden}
.glow{position:absolute;inset:0;background:
  radial-gradient(1000px 640px at 10% -12%,rgba(61,123,253,.22),transparent 62%),
  radial-gradient(880px 620px at 96% 112%,rgba(34,211,197,.16),transparent 62%),
  radial-gradient(640px 420px at 82% -6%,rgba(255,180,84,.09),transparent 60%)}
.gridlayer{position:absolute;inset:0;background-image:radial-gradient(rgba(148,163,184,.16) 1px,transparent 1.3px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(75% 65% at 50% 28%,#000 25%,transparent 100%);
  mask-image:radial-gradient(75% 65% at 50% 28%,#000 25%,transparent 100%)}
.fc{position:absolute;bottom:-70px;aspect-ratio:1;border:1.5px solid;border-radius:4px;opacity:0;animation:fcRise linear infinite}
@keyframes fcRise{0%{transform:translateY(0) rotate(0);opacity:0}8%{opacity:var(--o,.4)}88%{opacity:var(--o,.4)}100%{transform:translateY(-118vh) rotate(300deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.fc{display:none}}

/* ---- 布局 ---- */
.wrap{max-width:1180px;margin:0 auto;padding:26px 22px 40px}
.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 4px 12px rgba(61,123,253,.4));animation:markFloat 4.5s ease-in-out infinite}
@keyframes markFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.brand-name{font-weight:700;font-size:19px}
.ver{margin-left:8px;font:600 10.5px var(--mono);color:var(--amber);border:1px solid rgba(255,180,84,.4);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:#aab9dd;border:1px solid rgba(148,163,184,.22);padding:5px 12px;border-radius:99px;background:rgba(148,163,184,.06)}
.tag.amber{color:#ffd9a0;border-color:rgba(255,180,84,.35);background:rgba(255,180,84,.07)}

.intro{margin:34px 0 22px}
.intro h1{margin:0;font-size:clamp(26px,3.8vw,42px);line-height:1.22;font-weight:700}
.intro h1 em{font-style:normal;color:var(--amber)}
.intro p{margin:10px 0 0;color:var(--mut);max-width:640px;font-size:14.5px}

.grid2{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);gap:20px;align-items:start}
@media(max-width:980px){.grid2{grid-template-columns:1fr}}
.panel{position:relative;background:linear-gradient(180deg,var(--panel-a),var(--panel-b));border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:0 24px 60px rgba(2,6,18,.5)}
.panel-head{margin-bottom:16px}
.overline{font-family:var(--mono);font-size:10.5px;letter-spacing:.32em;color:var(--teal)}
.panel-head h2{margin:4px 0 0;font-size:20px}

/* 步骤条 */
.steps{list-style:none;display:flex;gap:14px;margin:0 0 18px;padding:0}
.steps li{flex:1;display:flex;gap:10px;align-items:flex-start;background:rgba(148,163,184,.06);border:1px solid rgba(148,163,184,.1);border-radius:12px;padding:10px 12px;transition:.25s}
.steps li:hover{background:rgba(148,163,184,.1);transform:translateY(-2px)}
.steps i{flex:none;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:600 12px var(--mono);color:var(--c);border:1.5px solid var(--c);font-style:normal}
.steps b{display:block;font-size:13px}
.steps span{font-size:11.5px;color:var(--mut);line-height:1.45;display:block}
@media(max-width:640px){.steps{flex-direction:column}}

/* 演示闸门 */
.gate{margin-top:18px;padding-top:16px;border-top:1px dashed rgba(148,163,184,.22);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.gate-title{font-size:13.5px;font-weight:600}
.gate-title span{margin-left:8px;font-size:12px;font-weight:400;color:var(--mut)}
.gate.ok .gate-title span{color:var(--green)}
.token-pill{margin-top:7px;display:inline-flex;gap:8px;align-items:center;font:500 11.5px var(--mono);color:#9fb2d6;background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,..........完整代码请登录后点击上方下载按钮下载查看