探索如何在 Divi 中創建和動畫 CSS 形狀

在網頁設計中使用 CSS 創建形狀無論如何都不是一個新概念。 事實上，創建 CSS 形狀的經典方法在很大程度上已被 Canvas 和 SVG 等其他 HTML 圖形解決方案所掩蓋。 然而，CSS 形狀（至少是基本形狀）更容易創建，並且仍然可以在網頁設計中發揮重要作用。 此外，當您為這些形狀添加滾動動畫時，會出現全新的設計元素。

在本教程中，我們將探索如何在 Divi 中創建和動畫 CSS 形狀。 一旦您了解瞭如何使用 Divi 的內置選項創建一些形狀的基本概念，您就可以為這些形狀設置動畫，為您的網站創建獨特的滾動動畫設計。 你會驚訝你能做多少！

讓我們開始吧。

搶先看

這是我們將在本教程中構建的設計的快速瀏覽。

免費下載佈局

要了解本教程中的設計，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

要將部分佈局導入您的 Divi 庫，請導航到 Divi 庫。

單擊導入按鈕。

在可移植性彈出窗口中，選擇導入選項卡並從您的計算機中選擇下載文件。

然後點擊導入按鈕。

完成後，分區佈局將在 Divi Builder 中可用。

讓我們進入教程，好嗎？

你需要什麼開始

首先，您需要執行以下操作：

1. 如果您還沒有安裝並激活 Divi 主題。
2. 在WordPress中新建一個頁面，在前端使用Divi Builder編輯頁面（visual builder）。
3. 選擇“從頭開始構建”選項。

之後，您將有一個空白畫布開始在 Divi 中進行設計。

探索如何在 Divi 中創建帶有動畫的 CSS 形狀

行列結構

首先，向該部分添加三分之一三分之二的列行。

在我們做任何其他事情之前，打開行設置並更新以下內容：

• 天溝寬度：1
• 均衡柱高：是
• 寬度：95%
• 最大寬度：900px

注意：這些設置對於我們的設計設置至關重要。 例如，三分之一三分之二的列結構與最大寬度為 900px 且沒有任何邊距（裝訂線寬度為 1）的行相結合，讓我們知道左列的寬度正好為 300px。 此外，如果我將我的設計包含在這個 300px 寬度的列中，我也可以確信它在平板電腦和移動設備上也會很好看。

添加分隔模塊墊片

接下來，添加一個分隔線來創建包含 CSS 形狀的列所需的間距。

此時，您應該打開層視圖模式來管理可以在 Divi Builder 的設置菜單中找到的層/模塊。

打開分隔線設置並更新分隔線的高度如下：

• 顯示分隔線：否
• 高度：150px

由於我們的 CSS Shapes 將被絕對定位，因此可以通過調整分隔線的高度輕鬆調整列區域的實際間距。 就個人而言，我發現這比嘗試操縱列的高度或間距更容易。 此外，它還為您提供了將分隔線造型為額外設計元素（或形狀）的額外好處。 現在，您可以將其視為未來 CSS 形狀設計的畫布。

使用邊框選項創建第一個 CSS 形狀

為了創建我們的 CSS Shape，我們將使用一個分隔模塊。 從技術上講，我們只使用圍繞模塊的邊界，而不是模塊區域。 （因此您可以使用其他模塊，例如文本模塊或代碼模塊）。

要創建 CSS 形狀，請複制之前已創建的分隔器模塊。

然後通過將每個設置為0px來取出divider模塊的高度和寬度，如下所示：

• 寬度：0px
• 高度：0px

對於第一個形狀，我們將創建一個指向右上角的直角三角形。 為此，請按如下方式更新分隔線邊框樣式：

• 邊框顏色：rgba(245,44,143,0.5)
• 頂部邊框寬度：150px
• 左邊框寬度：150px
• 左邊框顏色：透明

注意：將邊框顏色設置為半透明將有助於顯示附加設計元素的重疊形狀。

將這個新的分隔線標記為“形狀 1”也是一個好主意，以便以後輕鬆識別。

因為我們將向我們將創建的其他形狀添加滾動動畫，所以重要的是給這個形狀（以及本列中的其他形狀）一個絕對位置，以便它們堆疊在彼此的頂部，因此，有動畫的起點相同。

在高級選項卡下，將位置更改為絕對位置並將默認位置位置設置為右上角：

• 位置：絕對
• 發布位置：右上角（默認）

注意：將位置位置保持在右上角很重要，因為添加居中定位（如頂部居中或居中）的任何其他位置將與我們稍後將添加到 CSS 形狀的變換選項衝突。

恭喜你創建了一個 CSS 三角形！ 雖然這本身並沒有那麼令人印象深刻，但它會變得更好。 一旦我們用動畫移動它們，我們就可以復制這個三角形來創建各種新設計。

使用滾動動畫創建形狀 2

要創建下一個形狀（或在本例中為三角形），請複制前一個分隔模塊（形狀 1）以添加一個相同的右上角三角形，該三角形直接位於前一個三角形形狀上。

然後將其標記為“形狀 2”。

打開“shape 2”分隔線的設置並添加以下旋轉變換效果：

• 滾動變換效果：旋轉
• 啟用旋轉：是
• 起始旋轉：0°（在 30% 時）
• 中間旋轉：45°（45%）
• 結束旋轉：90°（60%）

使用滾動動畫創建形狀 3

複製“形狀 2”分隔器模塊並標記重複的“形狀 3”。

然後更新變換旋轉設置如下：

• 中間旋轉：90°
• 結束旋轉：180°

要創建最終（第四個）形狀，請複制形狀 3 分隔器模塊並將其標記為“形狀 4”。

然後更新變換旋轉設置如下：

• 中間旋轉：180°
• 結束旋轉：270°

此時，您應該看到由重疊且現在旋轉的三角形創建的正方形。

測試滾動動畫

為了測試這些形狀的滾動動畫，讓我們在該部分的頂部和底部添加一些臨時邊距。 打開部分設置並更新以下內容：

• 邊距：80vh 頂部，80vh 底部

當您上下滾動頁面時，它應該是這樣的。

在我們探索自定義這些形狀動畫的新方法之前，我們將在右欄中使用模擬標題來補充我們的設計。 如果您想繼續形狀設計，請隨意跳過此步驟。

將模擬標題添加到右列（可選）

為了幫助您了解如何在頁面上使用這些動畫形狀設計，我認為在右欄中添加模擬標題是個好主意。 這將是一個很好的例子，說明如何使用 CSS 形狀通過令人驚嘆的設計動畫來讚美您的頁面部分標題。

列自定義 CSS

在添加標題之前，我們可以使用 display flex 屬性確保文本在列內垂直居中。 打開第 2 列的設置並將以下自定義 CSS 添加到主元素：

display:flex;
flex-direction:column;
align-items:center;

列 CSS 就位後，向第 2 列添加一個新的文本模塊。

然後打開文本設置並使用 h2 標題更新正文內容，如下所示：

<h2>elegant design</h2>

在設計選項卡下，更新以下內容：

• 標題 2 字體：Poppins
• 標題 2 文本對齊：默認（桌面），居中（平板電腦和手機）
• 標題 2 文字大小：55 像素（桌面）、45 像素（平板電腦）、35 像素（手機）
• 寬度：100%

在此期間，繼續將以下滾動變換“水平運動”效果添加到文本中，如下所示：

• 滾動變換效果：水平運動
• 啟用水平運動：是
• 起始偏移：2（20%）
• 中間偏移：1（35%）
• 結束偏移：-0.6

然後打開響應式選項卡並按如下方式更新結束偏移：

• 結束偏移（平板電腦和手機）：0

探索右上角的三角形動畫

繼續我們在添加標題文本之前停止的地方，我們現在可以探索當前右上三角形形狀的設計/動畫可能性。

一種簡單的方法是使用多選來選擇所有四個 CSS 形狀（使用分隔模塊構建）。

然後打開其中一個形狀的設置以調出元素設置模式，該模式將立即更新所有四個模塊的設計，以便您可以直觀地查看結果。

然後選擇設計選項卡並打開變換原點選項卡。 將圖層視圖模式和元素設置模式放置在左側，以便您可以在 Divi Builder 中直觀地看到更改。

探索向上三角形 CSS 形狀設計動畫

現在您已經完成了設置，您可以探索創建新形狀並查看它們在當前滾動動畫到位時的外觀。

對於下一個示例，我們將創建一個向上三角形（技術上是等腰三角形）CSS 形狀。

為此，請確保多選所有形狀並更新每個形狀的邊框樣式，如下所示：

• 右邊框寬度：100px
• 右邊框顏色：透明
• 底部邊框寬度：100px
• 底部邊框顏色：rgba(245,44,143,0.5)
• 左邊框寬度：100px
• 左邊框顏色：透明

更新變換原點以探索新的滾動動畫設計

現在我們有了一個稍微新的形狀/三角形，產生的旋轉動畫也會有所不同。 要探索不同的滾動動畫設計可能性，請確保使用多選保持所有四個形狀的選擇，然後調整變換原點以查看結果。

探索 Teardrop CSS 形狀設計動畫

到現在為止，您應該已經掌握了這個過程是如何工作的。 對於下一個設計，我們將創建一個淚珠形狀，可以通過創建一個帶有邊框半徑的右下角三角形來完成。

為此，請確保多選所有形狀並更新每個形狀的邊框樣式，如下所示：

• 圓角：右上0px，右上50%，右下50%，左下50%
• 底部邊框寬度：150px
• 底部邊框顏色：rgba(245,44,143,0.5)
• 左邊框寬度：150px
• 左邊框顏色：透明

然後調整變換原點值以探索淚珠的滾動動畫設計。

探索扇形（或披薩片）CSS 形狀設計動畫

到現在為止，您應該已經掌握了這個過程是如何工作的。 對於下一個設計，我們將創建一個扇形，可以通過創建一個帶有邊界半徑的右下角三角形來完成。

為此，請確保多選所有形狀並更新每個形狀的邊框樣式，如下所示：

• 圓角：右上角0px，右上角0px，右下角50%，左下角50%
• 右邊框寬度：75px
• 右邊框顏色：透明
• 底部邊框寬度：75px
• 底部邊框顏色：rgba(245,44,143,0.5)
• 左邊框寬度：75px
• 左邊框顏色：透明

然後調整變換原點以探索不同的滾動動畫設計。

探索梯形 CSS 形狀設計動畫

對於我們最終的 CSS 形狀設計，我們將創建一個梯形 CSS 形狀，它可以為向上（或等腰）三角形添加一些額外的寬度。

為此，請確保多選所有形狀並更新每個形狀的邊框樣式，如下所示：

• 圓角：0px
• 右邊框寬度：100px
• 右邊框顏色：透明
• 底部邊框寬度：100px
• 底部邊框顏色：rgba(245,44,143,0.5)
• 左邊框寬度：100px
• 左邊框顏色：透明

然後更新形狀/模塊的寬度如下：

• 寬度：100px

梯形形狀就位後，您可以再次使用更新每個的變換原點來探索新的滾動動畫設計。

最終結果

讓我們最後看一下使用本教程可以實現的一些我最喜歡的設計。

最後的想法

探索如何在 Divi 中創建 CSS 形狀並為其設置動畫可能是讓這些創意源源不斷的好方法，因為您可以拓寬對 Divi 內置設計功能的力量的認識。 訣竅是了解如何使用邊框來創建不同的形狀。 然後，您可以為這些形狀添加滾動動畫。 但是不要忘記變換原點的力量，它改變了這些動畫定位每個形狀的方式。 當然，這是冰山一角，當您想到可以組合為您的網站創建無窮無盡的創意設計的所有不同形狀和動畫時。

希望這會給您一些關於如何將完美的 CSS 形狀動畫添加到您自己的網站的想法。

我期待在評論中收到您的來信。

乾杯!