通过CSS animation结合border-width和border-color变化可实现边框动画，如悬停扩展、脉冲、变色、闪烁及伪元素描边效果，适用于交互反馈与视觉强调场景。
在CSS中实现边框动画，可以通过 animation 属性结合 border-width 或 border-color 的变化，让元素的边框产生动态视觉效果。这种方式无需JavaScript，纯CSS即可完成，适用于按钮悬停、加载提示、焦点强调等场景。
使用 border-width 实现边框扩张动画
通过改变边框宽度并配合 transition 或 keyframes 动画，可以制作边框“向外扩展”或“脉冲”的效果。
例如，创建一个初始无边框的盒子，鼠标悬停时边框从0px扩展到5px：
.box {
width: 100px;
height: 100px;
background: #fff;
border: solid 0 transparent;
transition: border-width 0.3s ease;
}
.box:hover {
border-width: 5px;
}
如果你想用 animation 实现自动脉冲动画，可以这样写：
立即学习“前端免费学习笔记（深入）”；
.pulse-border {
width: 100px;
height: 100px;
background: #eee;
border: solid 0 transparent;
animation: expand-border 1.5s infinite ease-in-out;
}
@keyframes expand-border {
0%, 100% {
border-width: 0;
}
50% {
border-width: 10px;
}
}
使用 border-color 实现颜色渐变动效
改变边框颜色也能制造出醒目的动画效果，尤其适合用于状态提示或交互反馈。
比如实现一个循环变色的边框：
.color-cycle {
width: 80px;
height: 80px;
border: 4px solid red;
animation: color-change 2s infinite linear;
}
@keyframes color-change {
0% { border-color: red; }
25% { border-color: orange; }
50% { border-color: blue; }
75% { border-color: green; }
100% { border-color: red; }
}
你也可以结合透明度（transparent）实现“呼吸式”边框闪烁：
.blink-border {
border: 3px solid #00f;
animation: blink 1s infinite alternate;
}
@keyframes blink {
from { border-color: #00f; }
to { border-color: transparent; }
}
结合伪元素实现更复杂的边框动画
如果想实现如“边框描边”或“四边依次出现”的动画，可借助 ::before 或 ::after 伪元素配合 border-style 和 clip-path 等技术。
一个简单的描边效果示例：
.stroke-box {
position: relative;
width: 100px;
height: 60px;
background: #fff;
}
.stroke-box::after {
content: '';
position: absolute;
inset: 0;
border: 2px solid transparent;
background: linear-gradient(45deg, #f00, #00f) border-box;
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
animation: border-draw 2s infinite linear;
}
@keyframes border-draw {
0% { clip-path: inset(0 0 0 0); }
25% { clip-path: inset(0 0 0 0); }
50% { clip-path: inset(0 100% 0 0); }
75% { clip-path: inset(100% 100% 0 0); }
100% { clip-path: inset(0 0 0 0); }
}
这个例子利用 clip-path 配合动画模拟了边框逐边绘制的效果。
基本上就这些。通过控制 border-width、border-color 并结合 CSS animation，你可以轻松实现多种边框动效。关键在于选择合适的动画曲线和时间，让视觉体验自然流畅。不复杂但容易忽略细节，比如初始状态设置和兼容性处理。
