别再手写CSS动画了！AI帮你生成炫酷特效代码
提示词描述：
前端开发者的效率神器！用AI生成CSS/JS动画代码，loading、滚动视差、粒子背景、数字跳动...各种炫酷效果5分钟搞定。不用苦学贝塞尔曲线，不用翻文档，描述需求就能拿到可运行代码。适合前端开发、网页设计、动效爱好者。
提示语关键词：
CSS动画代码,AI生成前端代码,JS动画效果,网页特效代码,前端动效,AI写CSS
提示词内容：
【需求分析】
兄弟们，做前端最烦的是啥？写CSS动画啊！
想做个loading效果，查半天资料
想加个hover特效，调贝塞尔曲线调到怀疑人生
想整个滚动动画，JS+CSS配合写到头秃
其实这些活儿，AI 5分钟就能帮你搞定，而且效果比你自己写的还好！
【方法对比】
咱们对比下几种实现动画的方式：
方式1：纯CSS animation
✅ 性能好，浏览器原生支持
❌ 复杂动画写起来累，调试难
适合：简单过渡效果
方式2：CSS transition
✅ 代码少，易上手
❌ 只能做简单状态切换
适合：hover效果
方式3：JavaScript动画库（GSAP/Anime.js）
✅ 功能强大，控制精细
❌ 要引入第三方库，增加体积
适合：复杂交互动画
方式4：Canvas/WebGL
✅ 能做3D、粒子等炫酷效果
❌ 学习成本高，性能要优化
适合：大屏展示、游戏
方式5：让AI帮你写！（推荐）
✅ 啥都能做，代码规范
❌ 你得会描述需求
适合：所有场景！
【推荐方案】
通用动画生成提示词模板：
---
我需要你帮我写一个CSS/JS动画效果，具体要求：
动画类型：{填写：loading动画/滚动视差/按钮hover/页面转场/粒子背景/数字滚动/文字打字机效果}
使用场景：{填写：官网首页/登录页/数据大屏/H5活动页/小程序}
技术限制：{填写：纯CSS/可以用JS/可以用GSAP库/必须用Canvas}
期望效果：{填写：像苹果官网那种丝滑/要有科技感/要可爱活泼/要酷炫炸裂}
请给我：
1. 完整的HTML+CSS（+JS如果需要）代码
2. 关键代码的注释说明
3. 性能优化建议
4. 如何调整动画速度/颜色/大小
直接给我能运行的代码！
---
【具体案例】
比如我想做个"数字滚动"效果（常用于数据大屏）：
---
帮我写一个数字滚动动画：
- 从0滚动到{填写：10000}
- 要有缓动效果，不是匀速
- 数字字体要大，颜色用金色
- 背景深色，要有科技感
- 用纯CSS+JS实现
效果参考：支付宝年度账单那种数字跳动！
---
AI会给你：
- HTML结构
- CSS样式（含渐变、阴影等）
- JS动画逻辑（用requestAnimationFrame）
- 缓动函数选择建议
【使用步骤】
Step 1：想清楚你要什么效果
Step 2：用模板描述需求（越详细越好）
Step 3：拿到代码先跑一遍
Step 4：微调细节（颜色、速度、大小）
Step 5：复制到你项目里
💡 进阶玩法：
- "再给我5个不同风格的版本"
- "把这个动画改成响应式"
- "加个鼠标跟随效果"
【效果展示】
实测案例：
- 粉丝用AI生成的loading动画，被同事以为是花钱买的
- 数据大屏项目，10个动画效果AI半小时全搞定
- H5活动页的粒子背景，效果堪比专业动效师
记住：不是你不会做，是你没用对工具！