答案：通过CSS的transition和@keyframes结合伪元素实现卡片边框动态效果。1. 使用border-width与transition实现边框变粗；2. 利用伪元素和transform: scale()配合@keyframes模拟描边展开动画；3. 通过border-width从0到具体值的过渡实现边框生长效果；4. 使用多个伪元素分别控制四边，结合width/height变化实现逐边描边动画。根据需求选择合适方案。
想让卡片边框在鼠标悬停时产生动态效果，比如边框逐渐变粗或“描边”动画，可以通过 CSS 的 @keyframes、border-width 和 :hover 配合实现。下面介绍几种实用方法。
1. 边框宽度渐变动画（border-width + transition）
如果只是想让边框在 hover 时变粗，使用 transition 比 @keyframes 更简单高效。
.card {
width: 200px;
height: 150px;
border: 2px solid #007bff;
transition: border-width 0.3s ease;
}
.card:hover {
border-width: 6px; / 边框变粗 /
}
这种写法简洁，适合大多数场景。
2. 使用 @keyframes 实现“描边式”边框动画
如果你想做出从无到有“画出”边框的视觉效果，可以结合伪元素和 @keyframes 动画模拟描边。
立即学习“前端免费学习笔记（深入）”；
.card {
position: relative;
width: 200px;
height: 150px;
background: white;
overflow: hidden;
}
.card::before {
content: '';
position: absolute;
inset: 0;
border: 2px solid transparent;
border-radius: 4px;
background: linear-gradient(45deg, #ff7a00, #e91e63) border-box;
mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
-webkit-mask-composite: xor;
transform: scale(0);
transform-origin: center;
transition: transform 0.3s ease;
}
.card:hover::before {
animation: growBorder 0.6s ease forwards;
}
@keyframes growBorder {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
这个方法通过伪元素创建一个带渐变边框的图层，初始缩放为 0，hover 时放大显示，形成“展开”动画效果。
3. 利用 border-width 关键帧动画（直接控制宽度）
也可以直接对 border-width 使用关键帧，但需注意：CSS 不支持对 border-width 直接做动画，除非起始值是具体数字。
.card {
width: 200px;
height: 150px;
border-style: solid;
border-width: 0;
border-color: #28a745;
transition: border-width 0.4s ease;
}
.card:hover {
border-width: 4px;
}
这种方式利用了从 0 到 4px 的过渡，视觉上像是边框“生长”出来。虽然没用 @keyframes，但更稳定兼容。
4. 复杂描边动画（上下左右逐个出现）
如果要实现边框四条边依次出现的效果，可以用多个伪元素分别控制每条边。
.card {
position: relative;
width: 200px;
height: 150px;
}
.card::before,
.card::after {
content: '';
position: absolute;
background: #007bff;
transition: all 0.4s ease;
}
/ 上下横线 /
.card::before {
width: 0;
height: 2px;
top: 0;
bottom: 0;
margin: auto;
left: 0;
}
/ 左右竖线 /
.card::after {
height: 0;
width: 2px;
left: 0;
right: 0;
margin: auto;
top: 0;
}
.card:hover::before {
width: 100%;
}
.card:hover::after {
height: 100%;
}
这样 hover 时，横线从中间向两边伸展，竖线从中间向上下滑动，形成十字展开再填满的描边感。
基本上就这些常用方式。根据设计需求选择：简单变粗用 border-width + transition，高级描边可用伪元素配合 @keyframes 或 transform 模拟。关键是理解 border 本身不易动画，需要用技巧“绕开”限制。
