GLM-5.1 在「滚动触发动画」的评测结果

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

基本信息

  • 模型名称：GLM-5.1
  • 用例名称：滚动触发动画
  • 测试类型：网页生成
  • 评测维度：动画效果

系统提示词（System Prompt）

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

你是一名资深前端开发工程师，专注于 Web 动画与交互体验设计。 回答要求： 1. 所有代码（HTML、CSS、JavaScript）必须写在单个 HTML 文件中，可直接在浏览器运行。 2. 代码结构清晰，HTML / CSS / JS 三部分分区注释，变量命名语义化。 3. 优先保证功能的正确性与稳定性：Intersection Observer 阈值准确、数字递增平滑、动画只触发一次。 4. CSS 动画与 JS 逻辑解耦：通过添加/移除 CSS class 驱动动画，而非直接操作 style。 5. 页面视觉整洁、配色协调，具备基本的响应式适配（移动端不错位）。 6. 代码简洁易懂，适合作为教学示例，避免过度封装。

用户提示词（User Prompt）

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

# 滚动触发动画页面（基础版） 请生成一个完整的单文件 HTML 长页面，包含 10 个内容区块，用户向下滚动时依次触发各区块的入场动画。 ## 页面结构与动画要求 | # | 区块名称 | 动画效果 | |---|----------|----------| | 1 | Hero 顶部横幅 | 页面加载后直接展示，文字从下方淡入 | | 2 | 特性介绍（3 张卡片） | 奇数卡片从左侧滑入，偶数卡片从右侧滑入 | | 3 | 数字统计（3 组数据） | 数字从 0 递增到目标值（如 1200、98%、500+） | | 4 | 图片画廊（6 张图） | 每张图片从缩小状态（scale 0.6）淡入到正常大小 | | 5 | 时间轴（4 个节点） | 节点依次从透明到可见，带 0.2s 间隔延迟 | | 6 | 客户评价（3 张卡片） | 卡片以旋转（rotateY 90deg → 0）方式进入 | | 7 | 价格表（3 个方案） | 卡片以弹跳效果（CSS bounce）进入 | | 8 | FAQ（4 个问题） | 点击问题标题展开/折叠答案内容 | | 9 | 联系表单 | 整体从透明淡入（opacity 0 → 1） | | 10 | 页脚 | 静态展示，无动画 | ## 技术要求 1. **Intersection Observer**：统一使用 `threshold: 0.2`，即元素进入视口 20% 时触发动画。 2. **动画只播放一次**：元素触发动画后立即取消对其的观察（`observer.unobserve(entry.target)`）。 3. **数字递增**：使用 `requestAnimationFrame` 实现，动画时长约 1.5 秒，使用 easeOut 缓动。 4. **动画驱动方式**：元素初始带 `.hidden` 类（设置初始状态），触发后添加 `.visible` 类（设置目标状态），通过 CSS `transition` 完成过渡。 5. **图片占位**：使用 `https://picsum.photos` 或纯色 `div` 模拟图片，无需真实图片资源。 ## 样式要求 - 整体配色：深色 Hero（深蓝/深灰背景 + 白色文字），其余区块交替白色/浅灰背景。 - 每个区块 `padding` 不少于 60px，区块标题居中显示。 - 页面最大宽度 1100px，水平居中。 - 移动端（< 768px）卡片改为单列布局。 请直接输出完整的 HTML 代码，不要附加任何解释文字。

任务要求

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

  1. Intersection Observer 正确配置 threshold 为 0.2，且动画触发后调用 unobserve 确保只播放一次，不得使用 scroll 事件替代。
  2. 数字递增动画使用 requestAnimationFrame 实现，从 0 平滑递增到目标值，视觉上无跳跃感，动画时长在 1~2 秒之间。
  3. 10 个区块的动画类型各不相同（滑入、缩放淡入、旋转、弹跳等），且动画效果通过 CSS class 切换驱动，而非直接操作 inline style。
  4. FAQ 区块支持点击展开/折叠，同一时间可有多个问题展开，交互逻辑正确无 bug。
  5. 页面整体视觉整洁，配色协调，各区块有明确的视觉分隔，移动端（< 768px）不出现横向溢出或布局错位。

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html 滚动触发动画页面 /* ---------- 基础变量与重置 ---------- */ :root { --bg-dark: #0d1117; --bg-white: #ffffff; --bg-light: #f4f6f8; --accent: #00d4aa; --accent-dark: #00a882; --text-dark: #1a1f2e; --text-light: #e6edf3; --text-muted: #6b7280; --card-shadow: 0 4px 24px rgba(0,0,0,0.07); --max-width: 1100px; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Noto Sans SC', sans-serif; color: var(--text-dark); line-height: 1.6; overflow-x: hidden; } /* ---------- 通用区块 ---------- */ .section { padding: 80px 24px; } .section-dark { background: var(--bg-dark); color: var(--text-light); } .section-white { background: var(--bg-white); } .section-light { background: var(--bg-light); } .container { max-width: var(--max-width); margin: 0 auto; } .section-title { text-align: center; font-size: 2rem; font-weight: 700; margin-bottom: 10px; } .section-subtitle { text-align: center; color: var(--text-muted); font-size: 1rem; margin-bottom: 48px; } /* ---------- 动画基础类 ---------- */ /* 所有 .hidden 元素初始不可见，.visible 时过渡到目标状态 */ .hidden { opacity: 0; transition: opacity 0.8s cubic-bezier(0.25,0.46,0.45,0.94), transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94); } .visible { opacity: 1; } /* 从下方淡入 */ .fade-up.hidden { transform: translateY(40px); } .fade-up.visible { transform: translateY(0); } /* 从左侧滑入 */ .slide-left.hidden { transform: translateX(-80px); } .slide-left.visible { transform: translateX(0); } /* 从右侧滑入 */ .slide-right.hidden { transform: translateX(80px); } .slide-right.visible { transform: translateX(0); } /* 缩放淡入 */ .scale-in.hidden { transform: scale(0.6); } .scale-in.visible { transform: scale(1); } /* 旋转进入（Y轴） */ .flip-in.hidden { transform: rotateY(90deg); } .flip-in.visible { transform: rotateY(0); } /* 弹跳进入 — 使用 keyframes，不用 transition */ .bounce-in.hidden { opacity: 0; transform: scale(0.3); transition: none; } .bounce-in.visible { animation: bounceIn 0.8s cubic-bezier(0.34,1.56,0.64,1)...

AI 评审点评

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

【GEMINI】这是一份极高质量的交付代码。模型不仅精准满足了所有技术细节（如 IO 阈值、数字递增算法、动画触发机制），还在视觉设计和代码健壮性上做了额外优化（如加入 FontAwesome 图标、Google Fonts、缓动算法优化等）。代码结构严谨，完全符合资深前端开发工程师的角色设定。

进阶难度评测结果

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

模型生成产物

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

```html Verdant — 滚动触发动画长页面 /* ===== 设计 Token（CSS 自定义属性）===== */ :root { --bg-primary: #0c0f0a; --bg-secondary: #111710; --bg-light: #f5f3ee; --fg-on-dark: #e8e6e0; --fg-on-light: #1a1e16; --accent: #2ee89e; --accent-dim: rgba(46,232,158,.12); --accent-glow: rgba(46,232,158,.30); --warm: #f0a030; --warm-dim: rgba(240,160,48,.12); --card-dark: #181f15; --card-light: #ffffff; --border-dark: rgba(46,232,158,.10); --border-light: rgba(26,30,22,.10); --muted-dark: #7a8470; --muted-light: #8a8478; --font-display: Georgia, 'Noto Serif SC', serif; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif; --sp-xs: .5rem; --sp-sm: 1rem; --sp-md: 2rem; --sp-lg: 4rem; --sp-xl: 6rem; --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --dur: .8s; --ease: cubic-bezier(.22,1,.36,1); --ease-bounce: cubic-bezier(.34,1.56,.64,1); } /* ===== Reset ===== */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;font-size:16px} body{font-family:var(--font-body);line-height:1.6;overflow-x:hidden;background:var(--bg-primary);color:var(--fg-on-dark)} img,svg{display:block;max-width:100%} button{font-family:inherit} /* ===== 通用区块 ===== */ .sec{min-height:100vh;padding:var(--sp-xl) var(--sp-md);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden} .sec-dark{background:var(--bg-primary);color:var(--fg-on-dark)} .sec-dark-alt{background:var(--bg-secondary);color:var(--fg-on-dark)} .sec-light{background:var(--bg-light);color:var(--fg-on-light)} .sec-title{font-family:var(--font-display);font-size:clamp(2rem,5vw,3.2rem);font-weight:700;margin-bottom:var(--sp-sm);text-align:center;letter-spacing:-.02em} .sec-sub{font-size:clamp(.95rem,2vw,1.15rem);opacity:.6;margin-bottom:var(--sp-lg);text-align:center;max-width:560px} /* ===== 动画基础 ===== */ [data-anim]{opacity:0;will-change:transform,opacity;transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}...

AI 评审点评

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

【GEMINI】这是一份近乎完美的交付结果。模型不仅满足了所有功能性要求（10个区块、IO 阈值、音频初始化、数字递增缓动等），还在视觉美感和交互细节上展现了极高的水准。特别是 Web Audio API 的实现不仅逻辑正确，音效合成的思路也体现了对 Web 原生能力的深刻理解。代码注释简洁明了，响应式逻辑无懈可击，是一个典型的高质量前端动效页面模版。

困难难度评测结果

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

模型生成产物

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

```html NexusFlow - 重新定义开发体验 /* ========== 设计令牌 ========== */ :root { --bg: #08080e; --bg-alt: #0e0e1a; --card: #12121f; --card-hover: #1a1a2e; --accent: #f59e0b; --accent-light: #fbbf24; --accent-dark: #b45309; --accent-glow: rgba(245,158,11,0.25); --text: #e8e8f0; --text-muted: #6e6e82; --border: #222236; --success: #10b981; --danger: #ef4444; --radius: 12px; --radius-sm: 8px; --radius-lg: 20px; --shadow: 0 4px 24px rgba(0,0,0,0.4); --shadow-lg: 0 8px 48px rgba(0,0,0,0.6); --glass-bg: rgba(18,18,31,0.75); --glass-border: rgba(255,255,255,0.06); --speed: 1; --anim-fast: calc(0.3s / var(--speed)); --anim-normal: calc(0.6s / var(--speed)); --anim-slow: calc(0.9s / var(--speed)); --font-heading: Georgia,'Noto Serif SC','Times New Roman',serif; --font-body: -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; } /* ========== 重置与基础 ========== */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;font-size:16px} body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased} a{color:var(--accent);text-decoration:none} img{max-width:100%;display:block} button{cursor:pointer;font-family:inherit;border:none;background:none;color:inherit} input,textarea,select{font-family:inherit;font-size:inherit} /* ========== 滚动进度条 ========== */ .scroll-progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--accent-dark),var(--accent),var(--accent-light));z-index:10001;width:0;will-change:width;pointer-events:none} /* ========== 通用区块样式 ========== */ .section{padding:100px 24px;position:relative} .section-inner{max-width:1200px;margin:0 auto} .section-title{font-family:var(--font-heading);font-size:clamp(2rem,5vw,3rem);font-weight:700;text-align:center;margin-bottom:16px;letter-spacing:-0.02em} .section-title::after{content:'';display:block;width:60px;height:3px;background:var(--accent);margin:16px auto 0;border-radius:2px}...

AI 评审点评

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

【GEMINI】这是一个非常高水准的 Hard 级别实现。开发者不仅完美完成了所有功能区块，还在性能优化（Canvas 对象池、RAF 控制）、工程化（统一配置对象、CSS 变量控制速度）以及 Web Audio 的程序化生成方面表现出色。页面视觉美观，交互流畅，调节面板的实时生效体现了深厚的前端功底。唯一的微小改进空间是粒子交互的物理模型可以更复杂，但对于当前任务而言已近乎完美。

相关链接

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

加载中...
100%