用 CSS 动画实现图片动态边框最直接，核心是 @keyframes 配合 box-shadow 或 outline；box-shadow 性能好且不占布局，outline 适合“电流流动”效果；需注意 inline 元素要设 display、兼容性及移动端性能优化。
用 CSS 动画实现图片动态边框最直接
HTML5 本身不提供“动态边框”功能，真正起作用的是 CSS（尤其是 @keyframes 和 border / outline / box-shadow 的组合）。直接在
常见错误是试图用 绘制边框来“模拟动态”，反而增加复杂度且难响应式。实际项目中，95% 的需求用纯 CSS 就够了。
- 优先用
box-shadow动画：不占布局、支持多层、性能好 - 避免用
border动画做“流动光效”：宽度/样式频繁变化会触发重排（reflow） - 记得加
display: inline-block或block：
复制即用的发光呼吸边框代码
下面这段 CSS 给图片加一个柔和脉动的蓝紫色光晕边框，兼容所有现代浏览器（Chrome/Firefox/Safari/Edge）：
.img-pulse-border {
display: inline-block;
vertical-align: middle;
box-shadow: 0 0 0 0 rgba(106, 76, 147, 0.4);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(106, 76, 147, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(106, 76, 147, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(106, 76, 147, 0);
}
}
用法：
立即学习“前端免费学习笔记（深入）”；
关键点：
-
vertical-align: middle防止行内对齐错位 - 动画从
0px→10px→0px变化，比单纯缩放更自然 - rgba 的 alpha 值从
0.4→0→0，控制透明度过渡
要“描边流动”效果？用 outline + animation 更稳
如果需要类似“电流沿边跑”的效果（比如科技感导航图标），outline 比 border 更合适：它不参与盒模型，动画时不会挤压内容。
示例（单侧流动高亮）：
.img-outline-flow {
outline: 2px solid transparent;
outline-offset: -2px;
animation: outlineFlow 3s linear infinite;
}
@keyframes outlineFlow {
0% {
outline-color: #4a90e2;
}
33% {
outline-color: #50e3c2;
}
66% {
outline-color: #f5a623;
}
100% {
outline-color: #4a90e2;
}
}
注意：
-
outline-offset: -2px让 outline 贴紧图片边缘（否则默认有间隙） - 不要用
outline: none在 hover 中清掉——会导致动画中断；改用透明色过渡 - 该写法在 Safari 旧版（≤14）可能有渲染抖动，可加
transform: translateZ(0)强制 GPU 加速
移动端适配和性能提醒
在手机上跑动画容易卡顿，尤其低端安卓机。必须做三件事：
- 给动画元素加
will-change: box-shadow（仅对真正需要的元素） - 避免同时动画 >3 个属性（比如
box-shadow+transform+opacity） - 用
prefers-reduced-motion降级：用户开启“减少动画”时停掉
降级写法示例：
@media (prefers-reduced-motion: reduce) {
.img-pulse-border {
animation: none;
box-shadow: 0 0 0 2px #6a4c93;
}
}
真正麻烦的不是写法，而是设计师给的“边框要像水波纹扩散再收缩三次，每次颜色不同”——这种需求得拆成多个 box-shadow 层叠动画，调试成本高，上线前务必真机测 iOS 和 Android 各版本。
