GLM-5.1 在「SVG 蒙版文字聚光灯效果」的评测结果

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

基本信息

  • 模型名称：GLM-5.1
  • 用例名称：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. 效果跟随鼠标实时更新

评测结果

综合得分

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

基础难度评测结果

  • 得分：94.6 分
  • 通过状态：已通过

模型生成产物

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

```html 聚光灯效果 — 探索黑暗中的光 * { margin: 0; padding: 0; box-sizing: border-box; } :root { --bg: #000000; --accent: #d4a24e; --accent-glow: rgba(212, 162, 78, 0.35); } html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); cursor: none; user-select: none; -webkit-user-select: none; } /* 粒子与光效画布 */ #fx-canvas { position: fixed; inset: 0; z-index: 1; pointer-events: none; } /* SVG 文字蒙版层 */ #text-svg { position: fixed; inset: 0; z-index: 2; pointer-events: none; width: 100%; height: 100%; } /* 自定义光标 */ #cursor-dot { position: fixed; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent-glow), 0 0 36px rgba(212,162,78,0.15); pointer-events: none; z-index: 100; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.4s ease; } #cursor-dot.visible { opacity: 1; } /* 底部提示 */ .hint-bar { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 50; display: flex; gap: 20px; align-items: center; opacity: 0; animation: hintIn 1.5s ease 1s forwards; } .hint-bar span { color: rgba(255,255,255,0.1); font-family: 'Noto Serif SC', serif; font-size: 12px; letter-spacing: 2px; animation: hintPulse 4s ease-in-out infinite; } .hint-bar .dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.07); animation: none; } @keyframes hintPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } @keyframes hintIn { to { opacity: 1; } } /* 光圈大小指示 */ #radius-display { position: fixed; top: 28px; right: 28px; z-index: 50; color: rgba(255,255,255,0); font-family: 'Noto Serif SC', serif; font-size: 12px; letter-spacing: 1px; transition: color 0.5s ease; } #radius-display.visible { color: rgba(255,255,255,0.25); } /* 页面淡入 */ body { animation: pageIn 1.2s ease forwards; } @keyframes pageIn { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .hint-bar span { animation: none; opacity: 0.5; } body { animation: none; } } 移动鼠标探索 滚轮调节光圈...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【CLAUDE】这是一个完成度极高的 SVG 蒙版聚光灯实现。候选输出不仅完整满足了所有功能要求（纯黑背景、中央文字、鼠标跟随聚光灯、遮罩效果），还在视觉表现和交互体验上做了大量增强：多层次的文字布局、Canvas 粒子系统、点击脉冲扩散、滚轮调节光圈、触摸设备支持等。技术实现采用了标准的 SVG mask + radialGradient 方案，蒙版逻辑正确（黑底 + 渐变圆），聚光灯跟随流畅（缓动插值）。代码结构专业，注释充分，响应式设计完善，性能优化到位。整体作品在满足基本测试要求的基础上，展现了较高的工程素养和艺术审美，是一个优秀的前端交互作品。 【GEMINI】这是一个极其优秀的实现。模型不仅精准地完成了 SVG 蒙版聚光灯的技术要求，还通过 Canvas 粒子、平滑动画和丰富的交互反馈（滚轮缩放、点击脉冲）将一个基础的测试题目提升到了艺术展示页面的水平。代码严谨，考虑了响应式布局和触摸屏适配，表现非常专业。 【KIMI】该实现远超基础要求，展现了专业级的前端开发能力。SVG mask核心方案正确，视觉层次丰富，交互细节完善。主要问题在于HTML实体编码导致代码无法直接运行，以及装饰元素稍显过度。若修正编码问题并适度简化视觉元素，将是该测试用例的标杆实现。

进阶难度评测结果

  • 得分：94.0 分
  • 通过状态：已通过

模型生成产物

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

```html 聚光灯 · 裂痕与光 * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, #0d0d1a 0%, #050508 70%, #020204 100%); cursor: none; user-select: none; -webkit-user-select: none; } #mainSvg { position: fixed; top: 0; left: 0; display: block; } /* 自定义光标 */ .cursor-dot { position: fixed; width: 8px; height: 8px; background: rgba(255, 255, 255, 0.9); border-radius: 50%; pointer-events: none; z-index: 100; transform: translate(-50%, -50%); transition: opacity 0.4s ease, transform 0.15s ease; box-shadow: 0 0 8px rgba(255, 255, 255, 0.5), 0 0 24px rgba(255, 200, 150, 0.2), 0 0 48px rgba(255, 150, 100, 0.08); } .cursor-dot.hidden { opacity: 0; transform: translate(-50%, -50%) scale(0.3); } /* UI 覆盖层 */ .ui-layer { position: fixed; pointer-events: none; z-index: 10; } /* 半径指示器 */ .radius-indicator { bottom: 28px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.2); font-family: 'Cormorant Garamond', serif; font-size: 13px; font-weight: 300; letter-spacing: 4px; text-transform: uppercase; transition: color 0.3s ease; white-space: nowrap; } .radius-indicator.active { color: rgba(255, 255, 255, 0.55); } .radius-indicator.limit { color: rgba(255, 140, 100, 0.6); } /* 操作提示 */ .hint-text { bottom: 58px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.1); font-family: 'Noto Serif SC', serif; font-size: 11px; font-weight: 200; letter-spacing: 5px; white-space: nowrap; animation: hintBreathe 5s ease-in-out infinite; } @keyframes hintBreathe { 0%, 100% { opacity: 0.1; } 50% { opacity: 0.28; } } /* 星点淡入 */ #starsGroup { animation: starsIn 2.5s ease-out forwards; opacity: 0; } @keyframes starsIn { from { opacity: 0; } to { opacity: 1; } } /* 减少动画偏好 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } RADIUS 150 移动鼠标探索 · 滚轮缩放聚光灯 (function() { 'use...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【CLAUDE】这是一个高质量的SVG蒙版聚光灯效果实现，功能完整、视觉精美、代码规范。核心的SVG mask + radialGradient技术方案正确，聚光灯柔和边缘效果真实，彩色渐变文字与黑色背景形成强烈对比。背景星点、装饰元素等细节处理提升了整体沉浸感。代码结构合理，事件处理完善，还额外支持触摸设备。整体达到了较高的专业水准。 【GEMINI】这是一个非常优秀的实现。模型不仅精准完成了所有技术指标，还在视觉美学和交互细节上进行了深度优化。代码健壮，注释充分，利用 SVG mask 实现了高质量的动态遮罩效果，完全符合专业前端开发工程师的角色设定。 【KIMI】该实现是一个高质量的SVG聚光灯交互页面，完整覆盖了所有功能需求，并在视觉设计上展现出极强的专业水准。'万物皆有裂痕，那是光进来的地方'的主题与聚光灯探索的交互形式高度契合，多层渐变、星点背景、装饰元素共同营造出沉浸式的诗意体验。代码层面SVG mask使用规范，交互逻辑完善，是功能性与艺术性结合的典范。

困难难度评测结果

  • 得分：91.3 分
  • 通过状态：已通过

模型生成产物

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

```html 聚光灯文字效果 * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; overflow: hidden; background: #000; cursor: none; -webkit-user-select: none; user-select: none; } /* 背景氛围层：微妙的深色渐变增加空间感 */ .bg-atmosphere { position: fixed; inset: 0; background: radial-gradient(ellipse at 25% 30%, rgba(25, 8, 35, 0.45) 0%, transparent 55%), radial-gradient(ellipse at 75% 70%, rgba(8, 18, 38, 0.45) 0%, transparent 55%), radial-gradient(ellipse at 50% 50%, rgba(12, 12, 18, 0.3) 0%, transparent 65%), #000; pointer-events: none; z-index: 0; } /* 主 SVG 画布 */ #mainSvg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; } /* 底部操作提示 */ .hint { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.16); font-family: 'Noto Serif SC', serif; font-size: 13px; letter-spacing: 4px; pointer-events: none; z-index: 10; opacity: 0; transition: opacity 2s ease; white-space: nowrap; } .hint.visible { opacity: 1; } /* 右上角钉住计数 */ .pin-count { position: fixed; top: 28px; right: 28px; color: rgba(255, 255, 255, 0.14); font-family: 'Noto Serif SC', serif; font-size: 12px; letter-spacing: 2px; pointer-events: none; z-index: 10; opacity: 0; transition: opacity 0.6s ease; } .pin-count.visible { opacity: 1; } /* 半径指示器 */ .radius-indicator { position: fixed; top: 28px; left: 28px; color: rgba(255, 255, 255, 0.14); font-family: 'Noto Serif SC', serif; font-size: 12px; letter-spacing: 2px; pointer-events: none; z-index: 10; opacity: 0; transition: opacity 0.6s ease; } .radius-indicator.visible { opacity: 1; } 滚轮调节大小 · Shift+点击钉住光源 (function() { 'use strict'; /* ===== DOM 引用 ===== */ const svgNS = 'http://www.w3.org/2000/svg'; const defs = document.getElementById('svgDefs'); const maskEl = document.getElementById('spotlightMask'); const maskBg = document.getElementById('maskBg'); const textGroup = document.getElementById('textGroup'); const textGradient = document.getElementById('textGradient'); const...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【CLAUDE】这是一个高质量的SVG蒙版文字聚光灯效果实现，完整覆盖了所有功能需求。技术实现规范，SVG mask使用正确，lerp惯性缓动流畅，开场动画设计精良。视觉上诗意文字内容配合多色渐变和星点背景，氛围营造出色。代码结构清晰，注释完善，是一个接近生产级别的前端交互效果实现。 【GEMINI】这是一份极高水平的交付。模型不仅准确理解并实现了所有复杂的技术要求（如 SVG Mask 多光源管理、惯性插值、交互逻辑），还在视觉审美和用户引导上做了大量加分工作。代码结构优雅，性能表现优秀，完全符合「高级前端开发工程师」的人设定位。 【KIMI】整体而言，代码实现了所有要求的功能，技术实现质量较高，视觉效果良好。但在视觉冲击力、氛围营造以及用户体验的细节上还有提升空间。

相关链接

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

加载中...
100%