OpenAI: GPT-5 Mini 在「SVG 蒙版文字聚光灯效果」的评测结果

这是该 AI 模型在此测试用例上的详细评测结果。

基本信息

  • 模型名称：OpenAI: GPT-5 Mini
  • 用例名称：SVG 蒙版文字聚光灯效果
  • 测试类型：网页生成
  • 评测维度：SVG 矢量动画

系统提示词（System Prompt）

这是给 AI 模型的背景设定和角色指令：

你是一名前端开发工程师。 代码要求： 1. 生成完整的单页 HTML 应用 2. CSS 和 JavaScript 内联在 HTML 文件中 3. 代码结构清晰，有适当注释

用户提示词（User Prompt）

这是用户给 AI 模型的具体任务要求：

创建一个 SVG 蒙版文字聚光灯效果页面。 功能要求： - 页面背景为纯黑色 - 页面中央有一段文字（如「探索黑暗中的光」），默认不可见或极暗 - 鼠标在页面上移动时，以鼠标位置为圆心产生一个圆形聚光灯区域 - 聚光灯范围内的文字变为可见的白色或亮色 - 使用 SVG mask 或 radial-gradient 实现遮罩效果

任务要求

AI 模型需要满足以下要求：

  1. 页面背景为纯黑色
  2. 页面中央有可辨认的文字内容
  3. 鼠标移动时产生圆形聚光灯区域
  4. 聚光灯内文字清晰可见，聚光灯外文字不可见或极暗
  5. 效果跟随鼠标实时更新

评测结果

综合得分

该模型在此用例的得分为：— 分（满分 100 分），未通过

基础难度评测结果

  • 得分：— 分
  • 通过状态：未通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

SVG 蒙版文字聚光灯效果 /* 全局重置与页面布局 */ html, body { height: 100%; margin: 0; background: #000; /* 页面背景为纯黑色 */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: hidden; } /* 居中显示文本容器 */ .container { height: 100%; display: flex; align-items: center; justify-content: center; position: relative; user-select: none; cursor: none; /* 隐藏鼠标指针以增强聚光灯体验 */ } /* 中央文字样式（在黑色背景下被覆盖，聚光灯区域内可见） */ .headline { color: #fff; /* 文字为白色，默认被遮罩层覆盖而不可见 */ font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; font-size: clamp(28px, 6vw, 84px); font-weight: 700; letter-spacing: 0.02em; text-align: center; padding: 0 16px; line-height: 1.05; z-index: 0; /* 给文字添加一点发光效果，让聚光灯看起来更真实 */ text-shadow: 0 2px 8px rgba(255,255,255,0.06), 0 6px 24px rgba(255,255,255,0.03); } /* 顶层 SVG 用作遮罩层（覆盖整个页面） */ .spotlight-svg { position: absolute; inset: 0; /* 占满整个容器 */ width: 100%; height: 100%; z-index: 2; /* 覆盖文字，使文字默认被隐藏，mask 内的白色区域会显示文字 */ pointer-events: none; /* 允许鼠标事件透过到页面（我们从 document 捕获 mousemove） */ } /* 小提示（可选） */ .hint { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.28); font-size: 13px; z-index: 3; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; } /* 当离开页面或不移动时，聚光灯淡出（通过类名控制） */ .fading .spotlight-svg { transition: opacity 420ms ease; opacity: 0; pointer-events: none; } 探索黑暗中的光 移动鼠标或触摸以探索 /** * JavaScript 部分：控制径向渐变的位置与半径，使其随鼠标/触摸移动产生聚光灯效果。 * * 核心思路： * - 在 SVG defs 中有一个 ，我们通过设置其 cx, cy, r 来控制 * 聚光中心与大小（gradientUnits="userSpaceOnUse"）。 * - 鼠标移动时更新 cx/cy。根据视口大小调整 r（在移动速率或缩放时也可以做平滑处理）。 * - 使用 requestAnimationFrame 做节流，保证高性能。 */ (function () { // DOM 元素 const svg = document.getElementById('svgMask'); const grad = document.getElementById('spotGrad'); // const app = document.getElementById('app'); const headline = document.getElementById('headline'); // 配置：默认半径、最大/最小值（像素） const config = { baseRadius: 140, // 默认聚光半径（像素） minRadius: 80, maxRadius: 260, fadeTimeout:...

进阶难度评测结果

  • 得分：— 分
  • 通过状态：未通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

SVG 蒙版文字聚光灯效果 /* Reset & base */ html,body { height: 100%; margin: 0; background: #000; /* black background requirement */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: hidden; font-family: "Helvetica Neue", Inter, "PingFang SC", "Noto Sans", Arial, sans-serif; } /* Centering stage */ .stage { position: relative; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; } /* Subtle decorative glow behind the text (still masked) */ .back-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(600px 300px at 50% 45%, rgba(255,255,255,0.03), transparent 20%); mix-blend-mode: screen; } /* Info HUD */ .hud { position: absolute; right: 18px; top: 18px; color: #ddd; font-size: 13px; text-align: right; user-select: none; z-index: 40; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.04); backdrop-filter: blur(6px) saturate(120%); box-shadow: 0 6px 20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.02); } .hud b { display:block; font-size:15px; color:#fff; letter-spacing:0.6px; } .tip { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); color: rgba(255,255,255,0.6); font-size: 13px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.03); user-select: none; z-index: 40; } /* Give pointer a subtle custom look to emphasize the lamp */ .fake-cursor { position: absolute; width: 12px; height: 12px; border-radius: 50%; margin-left: -6px; margin-top: -6px; pointer-events: none; z-index: 30; box-shadow: 0 0 8px rgba(255,255,255,0.06), 0 0 24px rgba(0,0,0,0.2); mix-blend-mode: screen; transform-origin: center; transition: transform .12s ease; opacity: 0.9; border: 1px solid rgba(255,255,255,0.08); background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.8),...

困难难度评测结果

  • 得分：— 分
  • 通过状态：未通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

SVG 蒙版文字聚光灯 /* 基本布局 */ html,body { height: 100%; margin: 0; background: #000; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: hidden; font-family: Inter, ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial; color: #ddd; } /* 容器充满屏幕 */ .stage { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; } /* SVG 文字占位，全屏 */ svg.full { width: 100vw; height: 100vh; display: block; } /* 文本样式（由 SVG 控制颜色/渐变） */ .instructions { position: fixed; right: 18px; bottom: 18px; background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.85); padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1; backdrop-filter: blur(4px); box-shadow: 0 6px 18px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.02); user-select: none; } .hint-title { font-weight: 600; margin-bottom: 6px; font-size: 13px; } .hint-body { opacity: 0.95; font-size: 12px; } /* small accessibility for pointer */ .cursor-dot { position: fixed; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; mix-blend-mode: normal; background: rgba(255,255,255,0.6); box-shadow: 0 4px 18px rgba(255,255,255,0.08); } /* responsive tweaks for text size */ @media (max-width: 600px) { .instructions { right: 12px; bottom: 12px; padding: 8px 10px; font-size: 12px; } } 夜色深处 · 光影如歌 微光拨动静谧，记忆在边缘流淌 静听风的低语，等待光再次抵达 指尖回温后，星尘仍在延续 在黑夜里，我们以光相认 操作提示 滚轮调节大小 · Shift + 点击 钉住/移除 光源（最多 3 个） · 鼠标移动跟随光源 /* 高级 SVG 蒙版文字聚光灯效果 - 使用 SVG mask 实现遮罩 - requestAnimationFrame 驱动画面 - 惯性缓动使用线性插值（lerp） - 多聚光灯管理（最多 3 个钉住光源） - 鼠标滚轮调整当前跟随光源半径 */ /* --------------------------- 工具函数 --------------------------- */ function clamp(v, a, b) { return Math.max(a, Math.min(b, v)); } function lerp(a, b, t) { return a + (b - a) * t; } /* --------------------------- 初始化状态 --------------------------- */ // DOM references const svg = document.getElementById('svgRoot'); const maskSpots = document.getElementById('maskSpots'); const...

相关链接

您可以通过以下链接查看更多相关内容：

加载中...
100%