您可以使用氧氣生成器背景漸變來做酷 S**t
已發表: 2022-05-05我最喜歡的 CSS 方面之一是如何將 CSS 背景圖像（已經非常靈活的定位和平鋪）和漸變分層以製作非常酷的效果。 我們在大量項目中實現它們，在這篇文章中，我想介紹一些你可以使用這個 Oxygen Builder 功能來創建的東西。
喜歡這個內容？ 加入我們的 Facebook 群組 (IsoGroup)，訂閱時事通訊，並查看我們的製氧機課程（即將推出）。
拆分（和響應式）顏色和照片背景
我們的首選用例是構建全寬分割背景，其中 50% 為純色，50% 為圖像。 您可以使用 3 個 div 和 flexbox 來做到這一點，但問題是由於 Oxygen 處理部分的方式，您將無法輕鬆（並且負責任地）保持最大頁面寬度。
雖然您可以絕對定位一個 div 並將 div 元素集中的.ct-section-inner-wrap類指定為一個部分，但使用 CSS 漸變通常要容易得多。
首先，添加背景圖像。
然後，在頂部添加一個漸變，如下所示：
因為我們使用百分比，所以這是響應式的。 這意味著我們可以在頂部覆蓋一個 CSS 網格並將一些內容放入其中。
如果我們使用標準化的填充，我們甚至可以花哨並使用 calc(50% - yourpadding) 來定位背景以“合併”填充。
我們還可以利用響應式斷點來根據屏幕大小更改此效果的位置、顏色和透明度（注意：在 Oxygen 4.0 Beta 2 中似乎損壞了）。
分色背景
最簡單的效果是移除背景圖像並簡單地在兩種顏色之間分割漸變。
通過將兩者的定位設置為 50%，將不會出現淡入淡出。 相反，兩種顏色之間的硬過渡。
我們甚至可以做條紋。 請記住，如果您使用百分比，這將完全響應 100vw。
這真的很靈活。 我們甚至可以在同一部分實現硬轉換和淡入淡出：
最後，如果我們添加背景圖像，我們可以將這些效果疊加在圖像之上。
多色漸變
我們可以刪除硬停止，並將顏色合併在一起，如下所示：
您可以根據需要添加任意數量。 將顏色合併在一起時，我通常將定位留空。
動畫它
一個真正基本的動畫可以是簡單地移動背景。 為此，請將以下 CSS 添加到帶有漸變的部分：
然後，創建動畫關鍵幀，並將其添加到您的通用樣式表中：
因為我們將背景漸變的大小加倍，所以我將顏色推回中心，就像這樣。
Oxygen Builder 中的漸變邊框
您還可以按照此方法為 Oxygen Builder 中的元素添加漸變邊框。 首先，添加您的 div。
為它添加一個.gradient-border類。 將此代碼粘貼到自定義 CSS 中：
現在，進入這個類的 :after 狀態。
粘貼以下自定義 CSS：
像正常一樣設置背景漸變，或者簡單地將其粘貼到 .gradient-border:after 的自定義 CSS 中：
background : linear-gradient (60 deg , #f79533 , #f37055 , #ef4e7b , #a166ab , #5073b8 , #1098ad , #07b39b , #6fba82 ); 代碼語言： CSS （ css ）現在，每當您將 .gradient-border 類應用於 div 或元素時，都會應用效果。
動畫它
您可以通過添加動畫它：
到.gradient-border:after和
到你的通用 CSS。
這都是 CSS
您可以使用 https://cssgradient.io/ 之類的工具來使用純 CSS 執行此操作。 該工俱生成漸變所需的 CSS 線性漸變。 您所做的只是複制/粘貼到 Oxygen 中特定元素的自定義 CSS 字段中。
您可能還喜歡閱讀：