探討在 CSS 中為邊框製作動畫的多種方法
設定邊框
您可以使用以下幾種方法為元素設定邊框:border
、outline
和 box-shadow
。如 Stephanie Eckles 在 CSS 新增元素邊框的 3 種方法一文中所述,每種方法都有各自的優缺點,尤其是在邊框動畫方面。不使用適當的 CSS border
的主要原因是為了製作動畫。
我最近看到一篇文章「Fantastic CSS border animation」,作者 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-clip
並將其設為 padding-box
,這樣就不必再調整 background-size
。這樣一來,背景就不會再繪製在邊框區域下方。
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,在支援這項屬性的瀏覽器中,這項操作就變得輕而易舉:
@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 中,邊框動畫的可能性多不勝數。視用途而定,您可能會偏向使用其中一種。