- heishuitaotaolo2026-08-0718584
就想做一个功夫熊猫从天而降一掌拍碎屏幕碎裂的动画。屏幕没拍碎,我的耐心被拍碎了。。用的国产模型。是提示词的问题吗?以下为提示词
你是一名资深前端动画工程师(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
运行。
主楼 - Chiny2026-08-0766063
你可以试着再次丢给AI,强化一下镜头语音,可以先了解视频怎么制作的。
- 666_62026-08-0734240
animejs 这个动画库看起来挺屌的 是个js库,我感觉你要不试试?
- heishuitaotaolo2026-08-0818584
不试了,直接去豆包白嫖了一个视频,播放视频算了