CSS 邊框動畫

我們來看看在 CSS 中為邊框加入動畫的幾種方式

Bramus

設定框線

您可以透過下列幾種方法為元素設定框線：border、outline 和 box-shadow。根據 Stephanie Eckles 的「新增元素邊界的 3 種 CSS 方法」所述，每種方法都各有優缺點，尤其是為框線製作動畫。使用正確的 CSS border 主要是為了製作動畫。

我最近注意到一篇文章是「驚奇的 CSS 邊框動畫」，其中作者 Coco 深入探索更多選擇。使用 ::before 和 ::after 插入產生的內容可建立擬真邊框，接著以動畫形式呈現。

我最感興趣的是文章中支持的動畫圖表。它們真的能幫助您瞭解需要完成哪些事情，才能達到想要的效果。

白色圖層和彩色線條都是產生的內容。將白色圖層淡入/淡出，就能清楚瞭解動畫的堆疊和運作方式。

保留盒子模型

使用「產生內容」模仿邊框的缺點，是導致「箱子模型」毀損：內容現在可能會遮蓋人造邊框，因為說「框線」是在底層繪製。如要減緩，您必須將所需的 border-width 做為 padding 套用。

如果想擁有真正的邊框，進而保留方塊模型的運作方式，您可以使用多個背景，再延伸至邊界區域。

基本概念

首先，請建立虛線框線並新增多個背景。

/* Size of the border */
--border-size: 0.5rem;

/* Create a dotted border */
border: var(--border-size) dotted lime;

/* Create two background layers:
   1. A white semi-transparent
   2. A layer with the colored boxes
 */
background-image:
  linear-gradient(to right, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.5)),

  conic-gradient(
    from 45deg,
    #d53e33 0deg 90deg,
    #fbb300 90deg 180deg,
    #377af5 180deg 270deg,
    #399953 270deg 360deg
  )
;

使用 background-origin 調整背景大小

如您所見，背景看起來很有趣：已在邊框中繪製，但 conic-gradient 似乎都錯誤。這實際上是預期的行為：根據預設，背景圖片不會繪製在邊框內，因為其來源是元素的 padding-box。為了建立邊框，設定的背景圖片會在邊框內重複顯示，產生奇怪的視覺效果。

如要解決這個問題，您必須延展背景，使其佔用邊框大小。您可以手動延展背景並調整其位置，但最好使用 background-origin 屬性，根據 border-box 調整背景大小。

/* Manually add or offset the size of the border where needed */
background-position: calc(var(--border-size) * -1) calc(var(--border-size) * -1);
background-size: calc(var(--border-size) * 2 + 100%) calc(var(--border-size) * 2 + 100%);

background-origin: border-box;

這項新增功能更臻完善：

使用 background-clip 縮減白色背景圖層

由於背景會填滿所有空間，必須再次縮小半透明圖層。與其再次與 background-size 建立關聯，有一個更簡單的方法：使用 background-clip 並將其設為 padding-box。這樣一來，背景就不再繪製在框線區域下方。

background-clip:
  padding-box, /* Clip white semi-transparent to the padding-box */
  border-box /* Clip colored boxes to the border-box (default) */
;

最後，讓邊框 transparent 發揮完整效果。

border: 0.3rem dotted transparent;

動畫

如要還原邊框的動畫，您可以操控 conic-gradient 的起始角度。

--angle: 0deg;
conic-gradient(
  from var(--angle),
  #d53e33 0deg 90deg,
  #fbb300 90deg 180deg,
  #377af5 180deg 270deg,
  #399953 270deg 360deg
);

多虧了 @property，支援這個 API 的瀏覽器將變得輕而易舉：

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

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

程式碼合併後，程式碼會變成：

額外內容：border-image

先前說明的漸層邊框繪製方法是使用 CSS border-image。

這允許簡化程式碼，因為您不需要處理重疊的背景。動畫的套用方式與先前相同。

/* Create a border */
border: 0.5rem solid transparent;

/* Paint an image in the border */
border-image:
  conic-gradient(
    from var(--angle),
    #d53e33 0deg 90deg,
    #fbb300 90deg 180deg,
    #377af5 180deg 270deg,
    #399953 270deg 360deg
  ) 1
;

不過，您會發現以下幾個項目已不再適用：

• border-image 不會遵循 border-radius，而是一律為矩形。
• 將 border-image-slice 設定為填滿時，border-image 不會繪製在設定的 background 下方，而是位於上方。如果您希望背景設為半透明，可能就不太容易。

即將關閉

在 CSS 中，為邊界設定動畫的方式有很多種。視用途而定，您可能會採用其中一種。