创建带有动画渐变边框的精美卡片

在本教程中，我将引导您使用 CSS 自定义属性创建动画渐变边框效果，这可以为您的 UI 组件添加动态且引人注目的外观。最后，您将拥有一张带有动画渐变边框的简单卡片，使用 css 自定义 @property。

如果您不熟悉 css 自定义@property，请先阅读此博客。

基本卡结构

我们将在本教程中使用 React，基本卡片将如下所示

向卡片添加基本样式

创建一个简单的边框

在创建渐变动画边框之前，让我们看看如何创建简单的边框。我们不会使用 css border 属性，而是使用卡片的伪元素 ::before 和 ::after。这里的另一个重要属性是 inset，它允许我们将伪元素放置在卡片内。 z-index 将为 -1，因为我们希望边框位于卡片内容下方。

我们的卡片现在看起来像这样

添加自定义属性--angle

我们将添加一个自定义属性来跟踪渐变的角度。我们将使用圆锥梯度。
添加像这样的自定义属性

并对 css 进行以下更改

• 用背景图像替换背景以显示渐变。
• 为自定义属性角度添加动画旋转。
• 二次曲线梯度的第一个参数是角度，我们将更改它以便进行动画处理。
• 添加模糊和不透明度以获得发光效果。

你的CSS应该是这样的

最后我们有了一张带有动画渐变边框的卡片。

演示

点击这里

阅读更多

• MDN 文档@property

原帖

以上是创建带有动画渐变边框的精美卡片的详细内容。更多信息请关注PHP中文网其他相关文章！