# 網頁加載動畫

1. 將Lottie動畫添加到項目中
2. 設置觸發器
3. 配置動畫的消失

## 將Lottie動畫添加到項目中

從左邊的工具欄上點擊資產面板上的照片圖標，將動畫拖到頁面的頂部。

![](/files/rnSoZrQ9PNz2uu1A1cHW)

在Lottie動畫設置彈出窗口中勾選Loop(循環播放)。

![](/files/OpJdlJie8XPIQIsAbSE3)

關閉設置，在右邊的風格面板上，從位置旁邊的下拉菜單中選擇固定。這將控制動畫在屏幕上的位置。

設定100%的寬度和高度。

![](/files/jAaOcFTJVIvo6P2ydjK4)

在Position（位置）下，將z-index（堆疊順序）設定成高數字（例如9999），確保動畫總是在最上層。

![](/files/TK9fhluzNvzqFQAjTjfs)

如果動畫背景為透明的，可以添加背景顏色。

![](/files/9fYpPDgh7xWN9lItJeTy)

## 設置觸發器

在互動面板上，點擊頁面觸發器旁邊的加號，從下拉選單中選擇Page load(頁面加載)。

![](/files/xv0j1wyfF00dgIiXwwU7)

當頁面完成加載時，從動作選單中選擇啟動動畫。

![](/files/0PQreUqHJXW4kWrqaRUC)

點擊定時動畫旁邊的加號，並為動畫命名（頁面加載）。

## 配置動畫的消失

在交互面板上點擊定時動作旁邊的加號，從下拉菜單中選擇隱藏/顯示。

![](/files/uJU0B5MO1mkAOT7UwJpp)

 在隱藏/顯示下，將顯示設置為無。

![](/files/iqSYut04YOkKMjC10h7u)

在定時動作下，點擊時間線中的0.00秒，從下拉菜單中選擇不透明度。

![](/files/E2BREqX4Ozl1XdRZKJsy)

將不透明度滾動到0，持續時間滾動到1.5秒來淡化動畫。

![](/files/Uz7bmIVHaTITiAZFUw3Z)

在時間動作下，點擊時間線中1.5秒的Lottie動畫，在隱藏/顯示下，將其顯示設置為無。

![](/files/1NfMDz8NsM4mqpNSfuFV)

在預覽模式下檢查--調整數值與動畫，使其正好適合頁面。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.tenten.co/docs-webflow/webflow-101/7-dong-hua/wang-ye-jia-zai-dong-hua.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.