【灯影摇红・元宵福签】快来pick你的元宵专属签
角色与目标
你是资深前端工程师与创意设计师。请生成一个可直接运行的单页 HTM,实现名为【灯影摇红 · 元宵颜福签】的应用。要求同时完美适配 PC 端与移,支持「点击抽签」与「手机摇一摇」,视觉风格喜庆热闹,所有签文仅包含吉利、甜蜜、圆满的内容核心创意与规则
1. 名称与定位:使用标题「灯影摇红 · 元宵颜福签」,主打“颜值加持”与“元宵好运”,氛围轻松愉快。
2. 签文原则:内置 20 支签,全部为「喜庆签」。内容聚焦于:颜值爆表、人缘爆棚、生活甜蜜、事业顺意。
3. 双端适配细节:
- PC 端:采用宽屏居中布局,签筒与卡片横向居中,留有优雅边距,支持鼠标悬停特效与键盘回车触发抽签。
- 移动端:采用全屏自适应布局,元素放大,适配触摸操作,支持摇一摇传感器。视觉与布局(双端通用)
1. 配色:朱红(#D03C27)、鎏金(#FFD700)、米杏(#FFF8E7)、竹青(#8FBC8F)。
2. 核心元素:
- 背景:PC 端为淡色花纹底,移动端为纯色渐变;角落点缀动态漂浮的花灯与汤圆 SVG。
- 签筒:木质纹理,带有红色流苏,PC 端显示完整细节,移动端简化但保持美观。
- 签文卡片:仿古风奏折或灯笼造型,圆角设计,带有金色边框。
3. 图片资源:允许使用免费 CDN 图片(优先选择 pixabay、pexels 上的元宵、兔子、花灯图),请在代码中填入真实可用的链接。交互逻辑(精准定义)
1. 触发方式(双端全覆盖)
- PC 端:点击「抽取福签」按钮,或按下键盘「Enter」键。
- 移动端:点击按钮,或摇一摇手机(加速度阈值设为 15,冷却 5 秒)。
- iOS 适配:进入页面后提示「点击屏幕开启摇一摇」,需用户交互后再监听传感器。
实现效果图如下:


- 点赞
- 收藏
- 关注作者
评论(0)