敢测

单文件 HTML：发光粒子按钮

同一个 Prompt，不同AI服务。谁专业、谁拉胯，一目了然。

题目

Prompt、输出类型、max tokens 和 temperature 一起放出来。

coding-js-ripple-button@v1

题场

代码能力

输出类型

HTML / 浏览器预览

Temperature

0.00

Max Tokens

1,200

浏览器可直接预览的 Coding 题。主要看是否能按要求输出完整 HTML、交互是否存在、是否引入外部资源。

完整 HTML 有交互无外部资源无 Markdown 包裹

模型 anthropic/claude-opus-4.7 模型 claude-opus-4-7 接入方 OfoxAI 接入方 PackyAPI

查看完整 Prompt

Create a single-file HTML demo.

Task:
Build an interactive glowing ripple button.

Requirements:
- Use only HTML, CSS, and vanilla JavaScript.
- Do not use external libraries or external assets.
- When the user clicks the button, create at least 12 small glowing particles that expand outward and fade within 700ms.
- The button should stay centered on the page.
- The page must work in a modern browser.
- Output only the complete HTML document.
- Do not use Markdown.
- Do not explain.

大模型员工答卷

anthropic/claude-opus-4.7

该模型能力由 OfoxAI 站点接入

疑似截断

查看原始输出

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Glowing Ripple Button</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: radial-gradient(circle at center, #1a1a2e 0%, #0a0a14 100%);
    font-family: 'Segoe UI', system-ui, sans-serif;
  }
  body {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ripple-btn {
    position: relative;
    padding: 18px 46px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: #fff;
    background: linear-gradient(135deg, #ff3cac, #784ba0, #2b86c5);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    outline: none;
    text-transform: uppercase;
    box-shadow:
      0 0 20px rgba(255, 60, 172, 0.4),
      0 0 40px rgba(120, 75, 160, 0.3),
      inset 0 0 10px rgba(255, 255, 255, 0.1);
    transition: transform 0.15s ease, box-shadow 0.3s ease;
  }
  .ripple-btn:hover {
    transform: scale(1.05);
    box-shadow:
      0 0 30px rgba(255, 60, 172, 0.6),
      0 0 60px rgba(120, 75, 160, 0.5),
      inset 0 0 15px rgba(255, 255, 255, 0.2);
  }
  .ripple-btn:active {
    transform: scale(0.97);
  }
  .particle {
    position: fixed;
    pointer-events: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10px 2px currentColor;
    will-change: transform, opacity;
    animation: particle-fly 700ms ease-out forwards;
  }
  @keyframes particle-fly {
    0% {
      opacity: 1;
      transform: translate(-50%, -50%) translate(0, 0) scale(1);
    }
    100% {
      opacity: 0;
      transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(0.3);
    }
  }
</style>
</head>
<body>
  <button class="ripple-btn" id="rippleBtn">Click Me</button>
<script>
  const btn = document.getElementById('rippleBtn');
  const colors = ['#ff3cac', '#ffd166', '#06d6a0', '#2b86c5', '#f72585', '#7209b7', '#fff'];

  btn.addEventListener('click', (e) => {
    const rect = btn.getBoundingClientRect();
    const cx = rect.left + rect.width / 2;
    const cy = rect.top + rect.height / 2;
    const count = 18;

    for (let i = 0; i < count; i++) {
      const p = document.createElement('div');
      p.className = 'particle';
      const angle = (Math.PI * 2 * i) / count + Math.random() * 0.4;
      const distance = 80 + Math.random() * 80;
      const dx = Math.cos(angle) * distance;
      const dy = Math.sin(angle) * distance;

有真实输出完整 HTML 包含交互脚本无外部资源无 Markdown 包裹

2026-05-23 16:41:31 · 8474 ms · 总耗时 8s · 输入 228 / 输出 1,199 / 总计 1,427 tokens

claude-opus-4-7

该模型能力由 PackyAPI 站点接入

疑似截断

查看原始输出

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Glowing Ripple Button</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: radial-gradient(circle at center, #1a1a3a 0%, #05050f 100%);
    font-family: 'Segoe UI', Tahoma, sans-serif;
  }
  body {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ripple-btn {
    position: relative;
    padding: 18px 48px;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 2px;
    color: #fff;
    background: linear-gradient(135deg, #6a11cb, #2575fc);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    outline: none;
    box-shadow:
      0 0 20px rgba(101, 60, 255, 0.6),
      0 0 40px rgba(37, 117, 252, 0.4),
      inset 0 0 12px rgba(255, 255, 255, 0.15);
    transition: transform 0.15s ease, box-shadow 0.3s ease;
  }
  .ripple-btn:hover {
    transform: scale(1.05);
    box-shadow:
      0 0 30px rgba(101, 60, 255, 0.8),
      0 0 60px rgba(37, 117, 252, 0.6),
      inset 0 0 12px rgba(255, 255, 255, 0.25);
  }
  .ripple-btn:active {
    transform: scale(0.97);
  }
  .particle {
    position: fixed;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    pointer-events: none;
    background: #fff;
    box-shadow: 0 0 8px 2px currentColor;
    animation: fly 700ms cubic-bezier(0.15, 0.7, 0.3, 1) forwards;
    will-change: transform, opacity;
  }
  @keyframes fly {
    0%   { transform: translate(-50%, -50%) translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; }
  }
</style>
</head>
<body>
  <button class="ripple-btn" id="btn">CLICK ME</button>
  <script>
    const btn = document.getElementById('btn');
    const colors = ['#ff4dd2', '#4dd0ff', '#ffd84d', '#a64dff', '#4dffb8', '#ff7a4d'];

    btn.addEventListener('click', (e) => {
      const rect = btn.getBoundingClientRect();
      const cx = rect.left + rect.width / 2;
      const cy = rect.top + rect.height / 2;
      const count = 24;

      for (let i = 0; i < count; i++) {
        const p = document.createElement('div');
        p.className = 'particle';
        const angle = (Math.PI * 2 * i) / count + (Math.random() * 0.4 - 0.2);
        const distance = 80 + Math.random() * 100;
        const dx = Math.cos(angle) * distance;
        const dy = Math.sin(angle) * distance;
        const size = 4 + Math.random

有真实输出完整 HTML 包含交互脚本无外部资源无 Markdown 包裹

2026-05-23 15:06:16 · 18074 ms · 总耗时 18s · 输入 228 / 输出 1,200 / 总计 1,428 tokens

anthropic/claude-opus-4.7

该模型能力由 OfoxAI 站点接入

疑似截断

查看原始输出

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Glowing Ripple Button</title>
<style>
  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: radial-gradient(ellipse at center, #1a1033 0%, #05030f 100%);
    overflow: hidden;
    font-family: system-ui, sans-serif;
  }
  body {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ripple-btn {
    position: relative;
    padding: 18px 44px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #fff;
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    border: none;
    border-radius: 40px;
    cursor: pointer;
    outline: none;
    box-shadow:
      0 0 20px rgba(106, 17, 203, 0.6),
      0 0 40px rgba(37, 117, 252, 0.4),
      inset 0 0 10px rgba(255, 255, 255, 0.2);
    transition: transform 0.15s ease, box-shadow 0.3s ease;
  }
  .ripple-btn:hover {
    transform: scale(1.05);
    box-shadow:
      0 0 30px rgba(106, 17, 203, 0.9),
      0 0 60px rgba(37, 117, 252, 0.6),
      inset 0 0 15px rgba(255, 255, 255, 0.3);
  }
  .ripple-btn:active {
    transform: scale(0.97);
  }
  .particle {
    position: fixed;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    pointer-events: none;
    background: #fff;
    box-shadow: 0 0 8px 2px currentColor;
    will-change: transform, opacity;
  }
  @keyframes particle-fly {
    0% {
      transform: translate(-50%, -50%) translate(0, 0) scale(1);
      opacity: 1;
    }
    100% {
      transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(0.2);
      opacity: 0;
    }
  }
</style>
</head>
<body>
  <button class="ripple-btn" id="btn">CLICK ME</button>
  <script>
    const btn = document.getElementById('btn');
    const colors = ['#ff4fcb', '#4ff0ff', '#ffe14f', '#9b4fff', '#4fff9b', '#ff8a4f'];

    btn.addEventListener('click', (e) => {
      const rect = btn.getBoundingClientRect();
      const cx = rect.left + rect.width / 2;
      const cy = rect.top + rect.height / 2;
      const count = 24;

      for (let i = 0; i < count; i++) {
        const p = document.createElement('div');
        p.className = 'particle';
        const angle = (i / count) * Math.PI * 2 + Math.random() * 0.3;
        const distance = 80 + Math.random() * 80;
        const dx = Math.cos(angle) * distance;
        const dy = Math.sin(angle) * distance;
        const color = colors[Math.floor(Math.random() * colors.length)];
        const size = 4 + Math.random() * 8;

        p.style.left = cx + 'px';
        p.style.top = cy +

有真实输出完整 HTML 包含交互脚本无外部资源无 Markdown 包裹

2026-05-22 14:37:33 · 9395 ms · 总耗时 9s · 输入 228 / 输出 1,200 / 总计 1,428 tokens