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>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
:root {
  --bg: #0B1120;
  --bg2: #111827;
  --fg: #E2E8F0;
  --muted: #64748B;
  --accent: #10B981;
  --accent-glow: rgba(16, 185, 129, 0.35);
  --accent2: #06D6A0;
  --danger: #EF4444;
  --card: #1E293B;
  --border: #334155;
  --radius: 14px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Space Grotesk', sans-serif;
  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* ===== 背景网格 ===== */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(16,185,129,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,185,129,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
/* 背景光晕 */
.bg-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  opacity: .25;
}
.bg-orb-1 { width: 500px; height: 500px; background: #10B981; top: -180px; right: -120px; animation: orbFloat 12s ease-in-out infinite alternate; }
.bg-orb-2 { width: 400px; height: 400px; background: #0EA5E9; bottom: -150px; left: -100px; animation: orbFloat 15s ease-in-out infinite alternate-reverse; }
.bg-orb-3 { width: 300px; height: 300px; background: #8B5CF6; top: 50%; left: 50%; transform: translate(-50%,-50%); animation: orbPulse 8s ease-in-out infinite; }

@keyframes orbFloat {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-40px, 30px); }
}
@keyframes orbPulse {
  0%, 100% { opacity: .1; transform: translate(-50%,-50%) scale(1); }
  50% { opacity: .2; transform: translate(-50%,-50%) scale(1.15); }
}

/* ===== 浮动粒子 ===== */
.particle-field {
  position: fixed; inset: 0; pointer-events: none; overflow: hidden;
}
.particle-field span {
  position: absolute;
  width: 3px; height: 3px;
  background: var(--accent);
  border-radius: 50%;
  opacity: 0;
  animation: particleRise linear infinite;
}
@keyframes particleRise {
  0% { transform: translateY(0) scale(0); opacity: 0; }
  15% { opacity: .6; transform: translateY(-10vh) scale(1); }
  85% { opacity: .3; }
  100% { transform: translateY(-100vh) scale(0); opacity: 0; }
}

/* ===== 验证卡片 ===== */
.verify-card {
  position: relative;
  width: 420px;
  max-width: 92vw;
  ba.........完整代码请登录后点击上方下载按钮下载查看