Hostinger AI Builder 手动模式添加动画教程

使用原生动画设置或第三方动画元素，为你的 Hostinger AI Builder 手动模式网站添加动画。

启用原生动画

你可以通过两种方式启用原生动画：

• 全局（整站）：选定的单一动画将应用于整个网站的所有元素
• 局部（单个元素）：为网站的各个元素单独设置动画；这样，你可以为不同元素设置不同类型的动画

嵌入代码元素 不支持原生动画。

启用整站动画

1. 在 AI 建站工具（AI builder）中，展开左侧的 Website styles（网站样式）面板。
2. 打开 Animations（动画）标签页，选择你偏好的动画样式：淡入、滑动、缩放、左滑、右滑、模糊淡入或上移。
   

这样，所选动画将应用于整个网站的所有元素和区块。你可以在某个元素的**局部设置中选择无动画**，从而为该特定元素禁用动画。例如，你可以这样为文本元素关闭动画：

启用或禁用动画后，请**更新你的网站，更改才会在线上生效。要查看网站应用动画后的效果，请进入预览模式**或打开已上线的网站。

为特定元素启用动画

在 AI 建站工具中，点击目标元素并选择 Edit（编辑）或 Change（更改）以打开其设置。然后，找到 Animations（动画）设置并启用你偏好的动画。对于图片和卡片元素，你还可以设置悬停效果和循环效果。以下是文本元素设置的示例：

图片元素设置：

按钮元素设置：

其他元素的操作也类似！启用动画后，请**更新你的网站，更改才会在线上生效。要查看网站应用动画后的效果，请进入预览模式**或打开已上线的网站。

嵌入第三方动画元素

你可以使用第三方工具将免费动画嵌入到网站中。在本例中，我们使用 Lordicon 动画。

1. 登录 Lordicon，点击你喜欢的任意动画；如有需要，可对其进行自定义：
   
2. 点击 HTML 并复制代码：
   
3. 接着，打开 AI 建站工具，在网页上的目标位置添加一个**嵌入代码元素**。
4. 将动画代码粘贴到嵌入元素中，动画就会显示在你的页面上：
   
   如有需要，可随意**调整代码元素的大小**。
5. 最后，更新你的网站，更改才会在线上生效。

要查看网站应用动画后的效果，请进入**预览模式**或打开已上线的网站。