返回赛题列表

水滴入海的赞

入门

独立音乐 App 的"喜欢"按钮:点击不只变红,要让人联想到一滴水落入深潭。考察缓动函数的物理感和涟漪扩散的自然度。

规则说明

单 phase 微交互题。聚焦在一个极小的组件(Like 按钮)上深挖动效细节。
要求按钮真正可交互——可以点亮 / 取消、状态切换流畅,不能只是单次播放的装饰动画。

Prompt
Prompt
为一款独立音乐 App 设计一个**"喜欢(Like)"按钮**。 要求: - 当用户点击时,**不要只是简单地变成红色心形** - 整个交互过程必须让人联想到「**一滴水落入深潭**」的感觉——下落、击穿水面、扩散涟漪、水花溅起、最终归于平静 - 涟漪要自然,不能是机械的同心圆等距扩散 - 缓动曲线要符合流体物理:水滴下落是加速的、击水瞬间是骤停的、涟漪扩散是先快后慢逐渐衰减的、水面恢复要带轻微的回弹 技术与展示要求: - 输出一个完整的单文件 HTML,所有 CSS 和 JS 内联 - 可以使用 CDN 引入动效库(GSAP / Anime.js / Framer Motion 等)或纯原生 CSS + JS - 页面整体应该是一个独立音乐 App 的"正在播放"局部场景:放上一首虚构歌曲的封面卡片(封面用 CSS / SVG 自己画或用纯色块)、歌名、艺术家名,把 Like 按钮放在合理的位置 - 按钮必须**真正可交互**:可以点亮也可以取消,反复来回切换都不能崩 - 简体中文界面(歌名 / 艺术家可以是英文虚构名) 双击打开就能看到一个让你忍不住反复点的 Like 按钮。

Qwen 3.7 Max Thinking

Alibaba · Qwen Chat Web

标准 Prompt
1 次迭代2026-05-22

Claude Fable 5

Anthropic · 中转站API (F)

标准 Prompt
2m 45s1 次迭代2026-06-12

Claude Opus 4.7

Anthropic · 中转站API (X)

标准 Prompt
1 次迭代2026-05-13

Gemini 3.1 Pro Preview High Thinking

Google · Vertex AI Studio

标准 Prompt
1 次迭代2026-05-13

Gemini 3.5 Flash High Thinking

Google · Vertex AI Studio

标准 Prompt
1 次迭代2026-05-28

Kimi K2.7 Code

Moonshot AI · Zenmux AI

标准 Prompt
1 次迭代2026-06-12

GPT 5.5

OpenAI · 中转站API (B)

标准 Prompt
1 次迭代2026-05-13

Mimo V2.5 Pro

Xiaomi · Xiaomi Mimo API

标准 Prompt
1 次迭代2026-05-13