前言
時隔一個多月，這次給大家帶來的效果是一個彩色的炫酷Border，由HTML結合純CSS實現，十分簡單。話不多說，我們直接進入正題。
效果預覽
HTML部分
這個效果是一個簡單的HTML和CSS組合，建立出一個帶有動畫效果的文字框。HTML部分包含了一個div元素，其類名為box，內部包含了一個文字you are my SUPER STAR，這個內容可以自定義。
CSS部分
接下來就是關鍵的CSS部分了。首先我們看到第一部分的CSS樣式，相關程式碼如下。
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #222;
}
.box {
font-size: 40px;
width: 10em;
height: 5em;
background-color: #111;
color: lime;
border-radius: 0.5em;
text-align: center;
line-height: 1.5em;
font-family: sans-serif;
display: flex;
align-items: center;
justify-content: center;
position: relative;
animation: animate_text 2s infinite alternate;
}
CSS樣式的body部分用於設定頁面主體屬性，對齊元素以使其水平垂直居中，並設定背景顏色為深灰色。.box 類的樣式定義了文字框的外觀：大小、背景顏色、字型、對齊方式等。它具有一個before偽元素，也就是一個偽元素在.box元素前面。這個偽元素的content為空，它要做的事情就是填充box的整個區域，並且設定了漸變背景以及動畫效果。
其中@keyframes 部分定義了兩個動畫，animate_bg 用於建立漸變背景的動畫效果，animate_text 用於改變文字的顏色。應用一個名為animate_text的動畫，持續時間為2秒，無限迴圈，並使用交替方向，從而給框內的文字新增了動畫效果。
緊接著我們可以看到第二部分的CSS樣式，相關程式碼如下。
.box::before {
content: "";
position: absolute;
width: calc(100% + 1em);
height: calc(100% + 1em);
border-radius: inherit;
z-index: -1;
background-image: linear-gradient(
60deg,
aquamarine,
cornflowerblue,
goldenrod,
hotpink,
salmon,
lightgreen,
sandybrown,
violet
);
background-size: 300%;
background-position: 0%, 50%;
animation: animate_bg 2.5s infinite alternate;
}
@keyframes animate_bg {
to {
background-position: 100%, 50%;
}
}
@keyframes animate_text {
to {
color: yellow;
}
}
使用偽元素的時候，content: "";是必填項，這一行表示偽元素的內容為空，它通常用於新增修飾性的內容。將偽元素的定位型別設定為絕對定位，這使得它相對於包含它的 .box 元素進行定位。透過width: calc(100% + 1em); 和 height: calc(100% + 1em);設定偽元素的寬度和高度，使其稍微大於外部的 .box 元素，以便它能夠溢位顯示漸變背景。
border-radius: inherit;：將偽元素的圓角半徑設定為與.box元素相同的值。z-index: -1;：將偽元素的堆疊順序設定為低以使其位於實際內容的底部。background-image: linear-gradient(...);：使用CSS漸變建立了一個八種顏色的彩色漸變作為偽元素的背景。background-size: 300%;：設定了漸變背景的大小為其容器的 300%，以確保漸變的效果。background-position: 0%, 50%;：設定了漸變背景的初始位置。
透過animation: animate_bg 2.5s infinite alternate;應用了一個名為 animate_bg 的動畫，使漸變背景產生了移動效果。@keyframes 關鍵幀動畫定義了名為 animate_bg 的動畫。這個動畫使漸變背景在 2.5 秒內從初始位置移動到終點位置。@keyframes 關鍵幀動畫定義了另一個名為 animate_text 的動畫。這個動畫使 .box 元素的文字顏色在動畫中變為黃色。
以上就是整個效果的CSS實現部分了。
總結
以上就是整個效果的實現過程了，純 CSS 實現，程式碼簡單易懂。
