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