您可以使用氧气生成器背景渐变来做酷 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 字段中。
您可能还喜欢阅读：