就想做一个功夫熊猫从天而降一掌拍碎屏幕碎裂的动画。屏幕没拍碎,我的耐心被拍碎了。。用的国产模型。是提示词的问题吗?以下为提示词
你是一名资深前端动画工程师(HTML5 Canvas、SVG、CSS3、GSAP、Anime.js、Web
Animations API 专家),请帮我开发一个单文件HTML久坐提醒动画。
项目目标:
做一个电影级全屏动画:原创功夫熊猫风格熊猫侠从天而降,一掌拍碎屏幕,裂纹扩散、碎片掉落,最后露出“你已经坐了
XX 分钟,起来活动一下吧!”。
要求: - 单文件HTML - 双击即可运行 - 无需Node/npm/后端 -
CSS、JS全部内嵌 - 可引用GSAP CDN - 使用HTML5/CSS3/SVG/Canvas/Web
Animations API - 不使用React/Vue/Three.js
动画流程: 1. 熊猫侠高速坠落(带拖尾、模糊、加速度) 2.
一掌拍向屏幕(震屏、白闪、Hit Stop、Scale Punch) 3.
SVG程序化玻璃裂纹,从掌击点随机扩散 4. 100~300块玻璃碎片受重力旋转掉落
5. 背后文字渐显: 你已经坐了 XX 分钟 起来活动活动吧 ^-^ 6.
熊猫侠停留,叉腰或竖拇指,轻微呼吸和眨眼Idle动画
特效: Motion Blur、Camera
Shake、Impact、Particle、Glow、Shadow、Debris、Slow Motion。
代码顶部提供: const config = { sitMinutes: 58, pandaDropTime: 900,
crackDuration: 600, debrisCount: 180, debrisDuration: 2600,
showTextDelay: 3200, autoClose: false, };
输出要求: - 输出完整HTML - 不省略任何代码 - 不使用TODO或占位符 -
若超长则自动分多次输出完整代码,最终可直接保存为 sit-reminder.html
运行。