前言
时隔一个多月，这次给大家带来的效果是一个彩色的炫酷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 实现，代码简单易懂。
