零基础入门：从最简单开始
不要被复杂的动画吓到。从这些最简单的效果开始，您会发现动画其实很"亲民"。
极简单
淡入淡出效果
教学应用
知识点逐条显示、答案揭晓、图片切换、重点强调。这是最基础也最实用的动画。
提示词示例
"请为以下内容添加淡入效果：
1. 标题：0.5秒淡入
2. 第一段：延迟0.3秒，0.8秒淡入
3. 图片：延迟0.6秒，1秒淡入
4. 使用CSS opacity和transition实现"
1. 标题：0.5秒淡入
2. 第一段：延迟0.3秒，0.8秒淡入
3. 图片：延迟0.6秒，1秒淡入
4. 使用CSS opacity和transition实现"
// AI会生成的CSS代码类似这样：
.fade-in {
opacity: 0;
transition: opacity 0.8s ease-in;
}
.fade-in.show {
opacity: 1;
}
.fade-in {
opacity: 0;
transition: opacity 0.8s ease-in;
}
.fade-in.show {
opacity: 1;
}
新手技巧
不用懂代码：直接复制上面的提示词，把"标题"、"第一段"换成您的内容即可。
调整速度：把"0.8秒"改成"1.5秒"就是慢速淡入，改成"0.3秒"就是快速淡入。
极简单
滑动进入效果
教学应用
解题步骤逐步展示、时间线推进、列表项逐条出现。比淡入更有"动感"。
提示词示例
"请为以下元素添加滑动进入效果：
1. 从左侧滑入：标题、图片
2. 从底部滑入：说明文字
3. 从右侧滑入：补充信息
4. 每个元素间隔0.3秒依次出现
5. 使用CSS transform实现"
1. 从左侧滑入：标题、图片
2. 从底部滑入：说明文字
3. 从右侧滑入：补充信息
4. 每个元素间隔0.3秒依次出现
5. 使用CSS transform实现"
新手技巧
方向选择：
- 左侧滑入：适合主要内容，符合阅读习惯
- 底部滑入：适合补充说明、注意事项
- 右侧滑入：适合对比内容、拓展知识
简单
点击反馈效果
教学应用
选择题反馈、按钮点击、可折叠内容、交互式练习。让学生知道"我点对了"。
提示词示例
"请实现选择题点击反馈效果：
1. 点击正确选项：绿色背景+对号图标+放大效果
2. 点击错误选项：红色背景+叉号图标+震动效果
3. 所有选项只能点击一次
4. 点击后显示解析文字
5. 使用CSS class切换实现"
1. 点击正确选项：绿色背景+对号图标+放大效果
2. 点击错误选项：红色背景+叉号图标+震动效果
3. 所有选项只能点击一次
4. 点击后显示解析文字
5. 使用CSS class切换实现"
新手技巧
不用写JavaScript：告诉AI"使用CSS class切换"，AI会自动生成无需代码的交互。
颜色选择：
- 正确：绿色 (#4CAF50) + 对号
- 错误：红色 (#F44336) + 叉号
- 提示：蓝色 (#2196F3) + 问号
新手友好提示词模板
万能动画提示词（直接复制使用）
// 新手专用提示词 - 直接复制，修改[]中的内容
我需要一个教学课件页面，包含动画效果。
页面内容：
[在这里粘贴您的教学内容，可以分点写]
动画要求（新手级别）：
1. 使用淡入效果显示主要内容
2. 标题从左侧滑入，持续0.6秒
3. 每段文字间隔0.4秒依次淡入
4. 图片延迟0.8秒后淡入
5. 重要关键词用颜色高亮+轻微放大效果
6. 按钮有点击反馈效果
7. 所有动画使用CSS实现，不要用复杂JavaScript
特别说明：
我是技术新手，请生成简单易懂的代码，添加详细注释。
我需要一个教学课件页面，包含动画效果。
页面内容：
[在这里粘贴您的教学内容，可以分点写]
动画要求（新手级别）：
1. 使用淡入效果显示主要内容
2. 标题从左侧滑入，持续0.6秒
3. 每段文字间隔0.4秒依次淡入
4. 图片延迟0.8秒后淡入
5. 重要关键词用颜色高亮+轻微放大效果
6. 按钮有点击反馈效果
7. 所有动画使用CSS实现，不要用复杂JavaScript
特别说明：
我是技术新手，请生成简单易懂的代码，添加详细注释。
复制上面的提示词，把[在这里粘贴您的教学内容]换成您的实际内容，就能生成带基础动画的课件。