CSS动画如何实现卡片边框动画_border-width @keyframes结合hover使用-css教程-PHP中文网

CSS动画如何实现卡片边框动画_border-width @keyframes结合hover使用

P粉602998670

发布： 2025-11-26 17:51:06

原创

918人浏览过

答案：通过CSS的transition和@keyframes结合伪元素实现卡片边框动态效果。1. 使用border-width与transition实现边框变粗；2. 利用伪元素和transform: scale()配合@keyframes模拟描边展开动画；3. 通过border-width从0到具体值的过渡实现边框生长效果；4. 使用多个伪元素分别控制四边，结合width/height变化实现逐边描边动画。根据需求选择合适方案。

css动画如何实现卡片边框动画_border-width @keyframes结合hover使用

想让卡片边框在鼠标悬停时产生动态效果，比如边框逐渐变粗或“描边”动画，可以通过 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;
}
<p>.card:hover {
border-width: 6px; /<em> 边框变粗 </em>/
}</p>

登录后复制

这种写法简洁，适合大多数场景。

2. 使用 @keyframes 实现“描边式”边框动画

如果你想做出从无到有“画出”边框的视觉效果，可以结合伪元素和 @keyframes 动画模拟描边。

立即学习“前端免费学习笔记（深入）”；

.card {
  position: relative;
  width: 200px;
  height: 150px;
  background: white;
  overflow: hidden;
}
<p>.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;
}</p><p>.card:hover::before {
animation: growBorder 0.6s ease forwards;
}</p><p>@keyframes growBorder {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}</p>

登录后复制

这个方法通过伪元素创建一个带渐变边框的图层，初始缩放为 0，hover 时放大显示，形成“展开”动画效果。

豆包AI编程

豆包推出的AI编程助手

1697

查看详情

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;
}
<p>.card:hover {
border-width: 4px;
}</p>

登录后复制

这种方式利用了从 0 到 4px 的过渡，视觉上像是边框“生长”出来。虽然没用 @keyframes，但更稳定兼容。

4. 复杂描边动画（上下左右逐个出现）

如果要实现边框四条边依次出现的效果，可以用多个伪元素分别控制每条边。

.card {
  position: relative;
  width: 200px;
  height: 150px;
}
<p>.card::before,
.card::after {
content: '';
position: absolute;
background: #007bff;
transition: all 0.4s ease;
}</p><p>/<em> 上下横线 </em>/
.card::before {
width: 0;
height: 2px;
top: 0;
bottom: 0;
margin: auto;
left: 0;
}</p><p>/<em> 左右竖线 </em>/
.card::after {
height: 0;
width: 2px;
left: 0;
right: 0;
margin: auto;
top: 0;
}</p><p>.card:hover::before {
width: 100%;
}</p><p>.card:hover::after {
height: 100%;
}</p>

登录后复制

这样 hover 时，横线从中间向两边伸展，竖线从中间向上下滑动，形成十字展开再填满的描边感。

基本上就这些常用方式。根据设计需求选择：简单变粗用 border-width + transition，高级描边可用伪元素配合 @keyframes 或 transform 模拟。关键是理解 border 本身不易动画，需要用技巧“绕开”限制。

以上就是CSS动画如何实现卡片边框动画_border-width @keyframes结合hover使用的详细内容，更多请关注php中文网其它相关文章！