在css中如何用transition制作边框动画-css教程-PHP中文网

在css中如何用transition制作边框动画

P粉602998670

发布： 2025-10-07 21:28:01

原创

939人浏览过

通过transition实现边框颜色渐变，鼠标悬停时border-color平滑过渡；2. 改变border-width实现边框扩张动画，从无到有扩展边框宽度；3. 使用伪元素::before或::after模拟边框，结合transform和border-color实现描边与立体动效；4. 利用透明边框与opacity过渡，实现边框柔和显现的淡入效果。核心是选择合适的边框属性配合transition，设置过渡时间与缓动函数，确保动画流畅自然。

在css中如何用transition制作边框动画

在CSS中使用 transition 制作边框动画，关键在于对边框属性（如 border-color、border-width、border-style）或相关伪元素的变化过程添加平滑过渡效果。只要边框属性发生改变，配合 transition 就能实现动画。

1. 改变边框颜色的过渡动画

这是最常见也最简单的边框动画。通过鼠标悬停（hover）触发边框颜色变化，并用 transition 让颜色渐变更自然。

.box {
  width: 200px;
  height: 200px;
  border: 2px solid #ccc;
  transition: border-color 0.3s ease;
}

.box:hover {
  border-color: #007bff;
}

登录后复制

当鼠标移到元素上时，边框颜色会从灰色平滑变为蓝色。

2. 改变边框宽度的动画

通过改变 border-width 实现“边框扩张”效果。

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

.grow-border {
  width: 150px;
  height: 150px;
  border: 0 solid transparent;
  transition: border-width 0.4s ease;
}

.grow-border:hover {
  border-width: 10px;
}

登录后复制

初始无边框，悬停后边框宽度从0扩展到10px，形成动态出现的效果。

卡拉OK视频制作

卡拉OK视频制作，在几分钟内制作出你的卡拉OK视频

178

查看详情

3. 使用伪元素模拟边框并动画（高级技巧）

有时直接动画 border 不够灵活，可以用 ::before 或 ::after 模拟边框，实现更复杂效果，比如描边动画。

.border-animation {
  position: relative;
  width: 200px;
  height: 100px;
  background: white;
}

.border-animation::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 2px solid #000;
  transition: all 0.4s ease;
}

.border-animation:hover::before {
  border-color: red;
  transform: scale(1.05);
}

登录后复制

利用伪元素创建外边框，hover 时改变颜色并轻微放大，产生立体动效。

4. 边框从无到有的淡入动画

结合透明边框和 opacity 过渡，实现柔和出现的边框。

.soft-border {
  width: 180px;
  height: 100px;
  border: 2px solid transparent;
  transition: border-color 0.5s ease, opacity 0.3s ease;
  opacity: 0.8;
}

.soft-border:hover {
  border-color: #28a745;
  opacity: 1;
}

登录后复制

悬停时边框颜色显现，同时轻微提升不透明度，视觉更柔和。

基本上就这些。transition 配合 border 属性能实现丰富但轻量的动画，重点是选择要变化的属性并设置合适的过渡时间与缓动函数。注意避免对性能影响大的属性组合，保持动画流畅。

以上就是在css中如何用transition制作边框动画的详细内容，更多请关注php中文网其它相关文章！