在本教學(xué)中，我將引導(dǎo)您使用 CSS 自訂屬性來(lái)建立動(dòng)畫(huà)漸層邊框效果，這可以為您的 UI 元件添加動(dòng)態(tài)且引人注目的外觀。最後，您將擁有一張帶有動(dòng)畫(huà)漸變邊框的簡(jiǎn)單卡片，使用 css 自訂 @property。

如果您不熟悉 css 自訂@property，請(qǐng)先閱讀此部落格。

基本卡片結(jié)構(gòu)

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

import "./styles.css";

const CardAnimatedBorder = () => {
  return (
    <div className="container">
      <div className="card">This is a card with animated gradient border</div>
    </div>
  );
};

export default CardAnimatedBorder;

為卡片添加基本樣式

.container {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card {
  margin: 0 auto;
  padding: 2em;
  width: 300px;
  background: #1c1f2b;
  text-align: center;
  border-radius: 10px;
  color: #ffffff;
  position: relative;
}

建立一個(gè)簡(jiǎn)單的邊框

在創(chuàng)建漸變動(dòng)畫(huà)邊框之前，讓我們看看如何創(chuàng)建簡(jiǎn)單的邊框。我們不會(huì)使用 css border 屬性，而是使用卡片的偽元素 ::before 和 ::after。這裡的另一個(gè)重要屬性是 inset，它允許我們將偽元素放置在卡片內(nèi)。 z-index 將為 -1，因?yàn)槲覀兿Ｍ吙蛭混犊ㄆ瑑?nèi)容下方。

.card::after,
.card::before {
  content: "";
  position: absolute;
  background: red;
  inset: -4px;
  z-index: -1;
  border-radius: 10px;
}

我們的卡片現(xiàn)在看起來(lái)像這樣

新增自訂屬性--angle

我們將新增一個(gè)自訂屬性來(lái)追蹤漸層的角度。我們將使用圓錐梯度。
新增像這樣的自訂屬性

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

並對(duì) css 進(jìn)行以下更改

• 用背景影像取代背景以顯示漸層。
• 為自訂屬性角度新增動(dòng)畫(huà)旋轉(zhuǎn)。
• 二次曲線梯度的第一個(gè)參數(shù)是角度，我們將更改它以便進(jìn)行動(dòng)畫(huà)處理。
• 添加模糊和不透明度以獲得發(fā)光效果。

你的CSS應(yīng)該是這樣的

.container {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card {
  margin: 0 auto;
  padding: 2em;
  width: 300px;
  background: #1c1f2b;
  text-align: center;
  border-radius: 10px;
  color: #ffffff;
  position: relative;
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.card::after,
.card::before {
  content: "";
  position: absolute;
  background-image: conic-gradient(
    from var(--angle),
    transparent 70%,
    blue,
    red
  );
  inset: -4px;
  z-index: -1;
  border-radius: 10px;
  animation: 2s spin linear infinite;
}

.card::before {
  filter: blur(1rem);
  opacity: 0.7;
}

@keyframes spin {
  from {
    --angle: 0deg;
  }
  to {
    --angle: 360deg;
  }
}

最後我們有了一張有動(dòng)畫(huà)漸層邊框的卡片。

示範(fàn)

點(diǎn)這裡

閱讀更多

• MDN 文件@property

原帖

以上是創(chuàng)建帶有動(dòng)畫(huà)漸變邊框的精美卡片的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！