五秒钟挑战网页开发实战🧣

围巾哥萧尘2025-09-03 17:20

请设计一个五秒挑战活动的界面与奖励机制，

具体要求如下：

核心挑战规则：设置总时长为10秒的倒计时仅当用户在5秒整（误差±0.1秒）触发操作时，视为挑战成功成功者获得荣誉证书+礼花特效超时触发者获得鼓励奖证书

界面布局要求：中央位置放置直径≥100px的红色圆形按钮按钮上方显示动态倒计时（精确到0.1秒）其他说明文字采用齿轮图标

交互形式：初始状态显示⚙️图标点击后展开挑战规则说明（含奖励标准、时间精度要求）再次点击收起

交互逻辑：用户点击红色按钮时记录触发时间系统自动判断： 4.9s < 触发时间 < 5.1s → 播放礼花动画+展示荣誉证书其他情况 → 展示鼓励奖证书

所有结果需附带精确到毫秒的触发时间记录

视觉规范：倒计时数字使用#FF0000红色成功状态背景使用金色渐变超时状态背景使用蓝色渐变齿轮图标采用金属质感设计请提供完整的交互原型设计（含状态切换逻辑）和视觉设计稿。