纯css实现一个边框流光动画效果

说在前面

上面图片这种边框流光动画效果大家应该都有见过吧，今天我们纯用css来实现一下这个效果。

在线体验

码上掘金

codePen

codepen.io/yongtaozhen…

代码实现

核心原理是利用CSS伪元素创建一个覆盖在元素外部的 "光带"，然后通过动画控制这个光带的尺寸和位置变化，模拟出流动的效果，同时，结合box-shadow属性可以实现发光效果。

html

<div class="container">
  <div class="box"></div>
</div>

• container 作为定位容器，需要借助它来实现流光效果
• box 是实际的内容区域

流光效果

.container::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -10px;
  left: -10px;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: linear-gradient(
    135deg,
    rgba(0, 119, 182, 0.2) 0%,
    rgba(0, 150, 199, 0.1) 100%
  );
  box-shadow: 0 0 15px rgba(0, 119, 182, 0.5),
    0 0 30px rgba(0, 150, 199, 0.3), inset 0 0 10px rgba(0, 119, 182, 0.2);
  animation: flow 3s linear infinite, glow 3s linear infinite alternate;
}

通过 ::before 伪元素创建一个位于容器左上角的小滑块，绝对定位将它定位到容器外部，接下来就是要让这个小滑块动起来。

流动动画

初始状态

0% {
  width: 20px;
  height: 20px;
}

因为绝对定位是top: -10px;left: -10px;，所以实际显示的宽高是10px，而且设置了10px的圆角，所以这一状态下的形状是一个圆形。

到达第二个顶点

20% {
  left: -10px;
  top: -10px;
  width: calc(100% + 20px);
  height: 20px;
}

从初始状态宽度不断增大，直到超出右边10px，形成顶部边框。

到达第三个顶点

40% {
  left: calc(100% - 10px);
  top: -10px;
  width: 20px;
  height: calc(100% + 20px);
}

由第二个状态转到这个状态的过程实际上就是，缩小宽度，增大高度的过程，直到超出底部10px，形成右侧边框。

到达第四个顶点

60% {
  top: calc(100% - 10px);
  left: -10px;
  width: calc(100% + 20px);
  height: 20px;
}

高度减少，宽度增大的过程，形成底部边框。

回到第一个顶点

80% {
  top: -10px;
  left: -10px;
  width: 20px;
  height: calc(100% + 20px);
}

宽度减小，高度增大的过程，形成左侧边框。

恢复初始状态

100% {
  left: -10px;
  top: -10px;
  width: 20px;
  height: 20px;
}

最后再把高度减小，收缩回到初始转态。

循环动画

设置一个循环动画，我们就可以得到这样一个效果。

animation: flow 3s linear infinite;

层级调整

最后再调整一下层级，让box元素在顶层，这样就只会显示边框的一个变化。

.box {
  z-index: 2;
  ……
}
.container::before {
  z-index: 1;
  ……
}

发光动画

@keyframes glow {
  from {
    box-shadow: 0 0 10px rgba(0, 119, 182, 0.5),
      0 0 20px rgba(0, 150, 199, 0.3),
      inset 0 0 5px rgba(0, 119, 182, 0.2);
  }
  to {
    box-shadow: 0 0 40px rgba(0, 119, 182, 0.8),
      0 0 80px rgba(0, 150, 199, 0.5),
      inset 0 0 20px rgba(0, 119, 182, 0.4);
  }
}

通过调整box-shadow的参数，实现发光强度的变化，内层阴影提供柔和光晕，外层阴影增加扩散感。

---

想要不同颜色的边框流光只需要修改一下background就可以，比如：

background: linear-gradient(
  135deg,
  rgba(0, 245, 255, 0.3) 0%,
  rgba(0, 132, 255, 0.2) 50%,
  rgba(110, 0, 255, 0.3) 100%
);

源码

gitee

gitee.com/zheng_yongt…

github

github.com/yongtaozhen…

---

• 🌟 觉得有帮助的可以点个 star~
• 🖊 有什么问题或错误可以指出，欢迎 pr~
• 📬 有什么想要实现的功能或想法可以联系我~

---

公众号

关注公众号『 前端也能这么有趣 』，获取更多有趣内容。

发送 加群 还可以加入群聊，一起来学习（摸鱼）吧~

说在后面

🎉 这里是 JYeontu，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球 🏸 ，平时也喜欢写些东西，既为自己记录 📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解 🙇，写错的地方望指出，定会认真改进 😊，偶尔也会在自己的公众号『前端也能这么有趣』发一些比较有趣的文章，有兴趣的也可以关注下。在此谢谢大家的支持，我们下文再见 🙌。