最近需要帮客户实现网站动画效果，首先我们先要看一下客户的网站效果是怎么样的。

客户提供的网站动画效果：

当我看到这个动画效果时，其实大概原理也知道动画实现方案，因为自己也做过类似的动画，里面每个动画元素都是基于CSS3动画+JS去实现的，由于现在都是基于AI独立完成，就想着能否让AI去实现这个效果。

最初方案

我直接把网站整个连接丢给AI，让他模仿站点这个动画效果，无论我如何描述，最后生成的都是AI自己做了一个滚动动画效果，基本和我提供不一样，想了想，可能这个站点是基于vue打包后的网站，源代码里面根本获取不到元素，都是基于JS生成的动态元素，也有一个是AI根据无法识别站点内容的原理，反正最后都是失败告终。

加上之前让AI实现的都是基于一个功能去实现，没有实现过这么精细且1:1还原的效果，难道就真的只能自己手动实现了吗？

通过不断思考后以及之前不断阅读了大量关于AI文章后得到一个结论：AI就像同事一样，你要让他做事情，是否可以告诉他你要实现原理及最终的呈现效果，这样AI不就能实现了吗。

抱着试一试心态，我先认真分析网站动画效果，总结出实现方案，输出文档让AI去一个个实现。

文字动画

首先我将这个动画分为三大块动画，因为如果直接让他实现所有动画的话，这样效果肯定不理想的，我通过获取网站元素的方式，将页面结构代码复制了下来，这样结构有了，AI只要帮我实现动画效果就行了。

接着我分析左边文字部分的动，写了下面的提示词：

你是一名高级前端工程师，有着10年开发经验，精通网站CSS3实现动画效果，并且熟悉使用vue3组合式API进行页面开发，能解决错误，并有良好的编码习惯

## 技术栈

- vue3
- typescript
- tailwindcss
- es6

## 项目背景

现在有一个网页，需要增加滚动效果，就是当滚动条滚动到一定位置时，执行动画效果，接下来我将告诉你如何去实现，你需要帮我完成这个网页的滚动条动画效果

## 项目需求

在当前块内容滚动时，文字部分总共会有3次更新文本内容及动画效果

1、执行第一个动画效果，动画效果为：

- 当滚动条下滑时，整个块向上滑动，直到退出当前块后，当滚动条继续下滑动时，整个文本块也要往下滑动，并且文本内容显示为：
  - 把“私人貸款”替换成“全自動結餘轉戶”
  - 把 “憑實力隨傳隨借 一對一跟進”替换成 “卡數及貸款一筆清”
  - “金額可達HKD1,000,000” 替换成 “金額可達 1,000,000”
  - “立即了解 MyCash 私人貸款” 替换成 “立即了解 MyCash 結餘轉戶卡數一筆清”

2、执行第二个动画效果，动画效果为：

- 当滚动条下滑时，整个块向上滑动，直到退出当前块后，当滚动条继续下滑动时，整个文本块也要往下滑动，并且文本内容显示为：
  - “全自動結餘轉戶” 替换成 “業主貸款”
  - “卡數及貸款一筆清” 替换成 “5分鐘現金到手 15分鐘踢走卡數”
  - “金額可達 1,000,000” 替换成 “免除繁雜文件 無需提供樓契”
  - “立即了解 MyCash 結餘轉戶卡數一筆清” 替换成 ”立即了解 MyCash 業主貸款“

3、执行第三个动画效果，动画效果为：

- 当滚动条下滑时，整个块向上滑动，直到退出当前块后，当滚动条继续下滑动时，整个文本块也要往下滑动，并且文本内容显示为：：
  - “業主貸款” 替换成 “中小企免抵押貸款”
  - “5分鐘現金到手 15分鐘踢走卡數” 替换成 ”7x24 一批即有“
  - “免除繁雜文件 無需提供樓契” 替换成 ”貸款金額 HKD 1,000,000起“
  - “立即了解 MyCash 結餘轉戶卡數一筆清” 替换成 ”立即了解 MyCash 業主貸款“

## 项目结果

就是滚动条在滚动时，会执行以上三个动画效果，请结合CSS3动画效果及JS代码实现以上效果，并且要求用vue3实现

 在AI一顿输出后，实现效果和我想要的基本已经达到一致。

通过上面的文本动画时效间隔后，AI生成出了一个动画阶段划分逻辑

// 阶段划分逻辑
if (scrollProgress >= 0.8) newStage = 3 // 中小企免抵押貸款
else if (scrollProgress >= 0.55) newStage = 2 // 業主貸款  
else if (scrollProgress >= 0.3) newStage = 1 // 全自動結餘轉戶
else newStage = 0

然后接下来，我将这个动画阶段应用到下面其它动画里面，就实现所有动画执行滚动机制是一样的。

人物动画

既然动画滚动机制有了，下面就是需要把人物替换，在替换的同时需要执行滑入滑出的效果，基于这个原理，我又写了人物动画效果的提示词：

你是一名高级前端工程师，有着10年开发经验，精通网站CSS3实现动画效果，并且熟悉使用vue3组合式API进行页面开发，能解决错误，并有良好的编码习惯

## 技术栈

- vue3
- typescript
- tailwindcss
- es6

## 项目背景

现在有一个网页，需要增加滚动效果，需要根据当前滚动阶段控制，执行动画效果，接下来我将告诉你如何去实现，你需要帮我完成这个网页的滚动条动画效果

## 项目需求

在当前块内容滚动时，人物将实现3次更新：

1、执行第一个动画效果，动画效果为：

- 当滚动条下滑时，图片向右滑动，直到退出当前块后，当滚动条继续下滑动时，整个图片也要往左滑动，并将图像换成：
  - 把“https://mycashcredit.com.hk/assets/IC_07300-B4LxGUAo.png”替换成“https://mycashcredit.com.hk/assets/IC_07359-CS6bFyA9.png”的图像

2、执行第二个动画效果，动画效果为：

- 当滚动条下滑时，整个图片向右滑动，直到退出当前块后，当滚动条继续下滑动时，整个图片也要往左滑动，并将图像换成：
  - 把“https://mycashcredit.com.hk/assets/IC_07359-CS6bFyA9.png”替换成“https://mycashcredit.com.hk/assets/IC_07282-CZtHT1lA.png”的图像

3、执行第三个动画效果，动画效果为：

- 当滚动条下滑时，整个图片向右滑动，直到退出当前块后，当滚动条继续下滑动时，整个图片也要往左滑动，并将图像换成：
  - 把“https://mycashcredit.com.hk/assets/IC_07282-CZtHT1lA.png”替换成“https://mycashcredit.com.hk/assets/IC_07362-zulyEoxb.png”的图像

## 项目结果

就是滚动条在滚动时，会执行以上三个动画效果，请结合下面阶段划分逻辑，CSS3动画效果及JS代码实现以上效果，并且要求用vue3实现

// 阶段划分逻辑
if (scrollProgress >= 0.8) newStage = 3 // 中小企免抵押貸款
else if (scrollProgress >= 0.55) newStage = 2 // 業主貸款  
else if (scrollProgress >= 0.3) newStage = 1 // 全自動結餘轉戶
else newStage = 0

 最后也输出我想要的效果了，下面就是实现的人物动画效果：

背景动画

在前面我们已经实现文字动画和人物动画了，接下来就差最后一块背景动画，通过分析网站执行效果，我一顿输出背景动画的提示词：

## 项目背景

现在有一个网页，需要增加滚动效果，需要根据当前滚动阶段控制，执行动画效果，接下来我将告诉你如何去实现，你需要帮我完成这个网页的滚动条动画效果

## 项目需求

在当前块内容滚动时，人物将实现3次更新：

1、执行第一个动画效果，动画效果为：
需要把前面8个块class为：
“bg-no-repeat bg-fixed bg-gradient-to-br from-yellow-200 from-50% via-green-300 via-70% to-teal-500 to-90%”
换成
“bg-no-repeat bg-fixed bg-gradient-to-br from-white via-orange-50 to-orange-300”
后面4个块的class为：
“bg-no-repeat bg-fixed bg-gradient-to-br from-white via-orange-100 to-orange-300”
替换成
“bg-no-repeat bg-fixed bg-gradient-to-br from-yellow-200 from-50% via-green-300 via-70% to-teal-500 to-90%”
在动画执行的时候，当第人物移出后需要把当前块的style的宽度从 100% 减到为 0 ,
当人物进来时需要把当前块的style的宽度从 0 增加 到100%。

2、执行第一个动画效果，动画效果为：
需要把前面8个块class为：
“bg-no-repeat bg-fixed bg-gradient-to-br from-white via-orange-50 to-orange-300”
换成
“bg-no-repeat bg-fixed bg-gradient-to-br from-yellow-200 from-30% via-green-300 via-60% to-teal-500 to-80%”
后面4个块的class为：
“bg-no-repeat bg-fixed bg-gradient-to-br from-yellow-200 from-50% via-green-300 via-70% to-teal-500 to-90%”
替换成
”bg-no-repeat bg-fixed bg-gradient-to-br from-fuchsia-200 from-30% via-pink-300 via-60% to-rose-500 to-80%“
在动画执行的时候，当第人物移出后需要把当前块的style的宽度从 100% 减到为 0 ,
当人物进来时需要把当前块的style的宽度从 0 增加 到100%。

3、执行第一个动画效果，动画效果为：
需要把前面8个块class为：
“bg-no-repeat bg-fixed bg-gradient-to-br from-yellow-200 from-30% via-green-300 via-60% to-teal-500 to-80%”
换成
”bg-no-repeat bg-fixed bg-gradient-to-br from-fuchsia-200 from-30% via-pink-300 via-50% to-rose-500 to-90%“
后面4个块的class为：
”bg-no-repeat bg-fixed bg-gradient-to-br from-fuchsia-200 from-30% via-pink-300 via-60% to-rose-500 to-80%“
替换成
”bg-no-repeat bg-fixed bg-gradient-to-br from-blue-200 from-50% via-green-100 via-70% to-yellow-300 to-90%“
在动画执行的时候，当第人物移出后需要把当前块的style的宽度从 100% 减到为 0 ,
当人物进来时需要把当前块的style的宽度从 0 增加 到100%。

## 项目结果

就是滚动条在滚动时，会执行以上三个动画效果，请结合下面阶段划分逻辑，CSS3动画效果及JS代码实现以上效果，并且要求用vue3实现

// 阶段划分逻辑
if (scrollProgress >= 0.8) newStage = 3 // 中小企免抵押貸款
else if (scrollProgress >= 0.55) newStage = 2 // 業主貸款  
else if (scrollProgress >= 0.3) newStage = 1 // 全自動結餘轉戶
else newStage =

 没想到，背景动画也实现得很好

最后网站效果全部都呈现出来了。

总结

通过实现本次网站动画效果，再次证明AI编码的强大，有时候我们急于求成，往往在写提示词的时候忽略了很多细节的东西，如果让AI去实现一个描述不清楚的事件时，想必也得不到我们想要的效果，最后在写提示词的时候给大家一点建议：

• 提供丰富的上下文
• 明确你的目标或问题
• 分解复杂任务
• 包含输入/输出或预期行为的示例
• 利用角色或人物模型
• 迭代并优化对话
• 保持代码清晰一致

保持按上面来写你任务的提示词，估计AI一定能实现你想要效果。