如何在 CSS 中定义边框底部颜色是可动画的

在 CSS 中，我们可以使用 border 属性来定义一个元素的边框，例如：

div {
  border: 1px solid black;
}

CSS 中的 border 属性可以分别定义边框的宽度、样式和颜色，其中颜色可以是一个固定的值，例如 black、#333 等等，也可以是一个变量或一个函数来动态生成颜色值，例如 var(--primary-color) 或 rgba(255, 255, 0, 0.5)。

要定义一个可动画的边框底部颜色，我们可以利用 CSS 中的过渡效果来实现。过渡效果可以让元素在发生变化时平滑地从一个状态到另一个状态，例如鼠标悬停时可以实现渐变色效果。

要让边框底部的颜色可动画，我们可以定义两个类，一个是初始状态，一个是目标状态，然后使用过渡效果来实现：

/* 初始状态 */
.border-bottom {
  border-bottom: 2px solid #ccc;
  transition: border-color 0.5s ease;
}

/* 目标状态 */
.border-bottom:hover {
  border-bottom-color: #f00;
}

在这个例子中，我们定义了一个 .border-bottom 类来表示元素的初始状态，其边框底部颜色为 #ccc，并且使用 transition 属性来让边框底部的颜色在发生变化时用 0.5 秒的时间平滑地过渡。

然后，我们再定义一个 .border-bottom:hover 类来表示元素的目标状态，当鼠标悬停在元素上时，其边框底部的颜色会变成 #f00，这个变化会在 0.5 秒的过渡时间内平滑地完成。

这样，我们就成功地实现了一个可动画的边框底部颜色效果。

完整的代码如下：

<div class="border-bottom">Hello World</div>

/* 初始状态 */
.border-bottom {
  border-bottom: 2px solid #ccc;
  transition: border-color 0.5s ease;
}

/* 目标状态 */
.border-bottom:hover {
  border-bottom-color: #f00;
}

注意，这个效果只在支持 CSS 过渡效果的浏览器中生效，如果你需要兼容旧版浏览器，可以考虑使用 JS 来实现动态效果。