定义@keyframes设置border-color渐变，再通过animation应用到按钮，可实现边框颜色平滑循环变化，结合:hover可控制悬停时触发动画，需确保初始边框样式与动画起点一致以避免跳帧。
想让按钮边框颜色动态变化，可以用 CSS 的 @keyframes 配合 border-color 实现平滑的动画效果。下面是一个简单实用的实现方法。
1. 定义关键帧动画 @keyframes
使用 @keyframes 指定边框颜色在不同时间点的变化：
@keyframes border-color-change { 0% { border-color: red; } 25% { border-color: orange; } 50% { border-color: yellow; } 75% { border-color: green; } 100% { border-color: red; } }2. 应用动画到按钮
将定义好的动画绑定到按钮元素，设置动画时长、循环方式等：
.animated-button { padding: 12px 24px; font-size: 16px; border: 3px solid red; background-color: #fff; cursor: pointer; animation: border-color-change 4s ease-in-out infinite; }3. HTML 示例
搭配一个简单的按钮标签即可看到效果：
立即学习“前端免费学习笔记（深入）”；
4. 可选：悬停触发动画
如果只想在鼠标悬停时播放动画，可以结合 :hover 使用：
.animated-button { padding: 12px 24px; border: 3px solid red; background-color: #fff; } .animated-button:hover { animation: border-color-change 2s ease-in-out infinite; }这样，当用户将鼠标移到按钮上时，边框颜色才开始循环变化。
基本上就这些。利用 @keyframes 控制 border-color，再通过 animation 应用，就能做出视觉吸引人的动态边框效果。不复杂但容易忽略细节，比如确保边框初始值和动画一致，避免跳帧。
