本文详解如何让发光动画条沿带圆角（尤其是左上角大圆角）的容器边缘平滑运行，避免在圆角处消失，通过精确控制关键帧时间点与尺寸过渡实现无缝衔接。
本文详解如何让发光动画条沿带圆角（尤其是左上角大圆角）的容器边缘平滑运行，避免在圆角处消失，通过精确控制关键帧时间点与尺寸过渡实现无缝衔接。
在实现「光效环绕卡片」类动画时，一个常见痛点是：当动画元素（如细长发光条）行进至高圆角区域（如 border-top-left-radius: 80px）时，因父容器设置了 overflow: hidden 且动画条本身为矩形，其直角末端无法自然贴合曲线，导致视觉上“突然截断”或“消失”——尤其在左上角这种过渡密集区。
根本原因并非动画逻辑错误，而是关键帧时间轴未对齐 + 尺寸/位置过渡不连续。原始代码中各边动画的起止百分比（如 0%, 20%, 40%）存在间隙或重叠不足，导致相邻边交接时出现空白期；同时，top 和 left 的硬切换未预留圆角所需的缓冲路径。
✅ 正确解法是：将四段动画严格按 25% 分段，形成首尾咬合的环形节奏，并配合微调定位，使每段动画的结束状态恰好是下一段的起始状态：
-
left条：0%→25% 向上伸展至顶，25%→50% 缩回（为top让出起点） -
top条：25%→50% 向右铺满，50%→75% 缩回至右端（为right预留位置） -
right条：50%→75% 向下延伸，75%→100% 缩回至底端 -
bottom条：25%→75% 从右向左展开（注意此处需反向逻辑），100% 回到左端完成闭环
以下是优化后的核心 CSS（适配任意尺寸，已移除 -webkit- 前缀以支持现代浏览器）：
.holder {
position: absolute;
top: 45%;
left: 45%;
width: 100px;
height: 100px;
border-radius: 10px;
border-top-left-radius: 80px; /* 关键：大圆角 */
overflow: hidden; /* 必须保留，但动画已适配 */
background: #1a1a1a;
}
.bar {
background: #d0f0dd;
box-shadow:
0 0 0 #40ff22,
0 0 4px #30ff1f,
0 0 8px #20ff1b,
0 0 16px #10ff18;
border-radius: 4px;
position: absolute;
}
.left {
width: 4px;
animation: left 2s linear infinite;
}
@keyframes left {
0%, 25% { height: 0; top: 96px; left: 0; }
25%, 50% { height: 100px; top: 0; left: 0; }
50% { height: 0; top: 0; left: 0; }
}
.top {
height: 4px;
animation: top 2s linear infinite;
}
@keyframes top {
25%, 50% { width: 0; top: 0; left: 0; }
50%, 75% { width: 100px; top: 0; left: 0; }
75% { width: 0; top: 0; left: 100px; }
}
.right {
width: 4px;
animation: right 2s linear infinite;
}
@keyframes right {
50%, 75% { height: 0; top: 0; left: 96px; }
75%, 100% { height: 100px; top: 0; left: 96px; }
100% { height: 0; top: 100px; left: 96px; }
}
.bottom {
height: 4px;
animation: bottom 2s linear infinite;
}
@keyframes bottom {
0%, 25% { width: 0; top: 96px; left: 0; }
25%, 75% { width: 100px; top: 96px; left: 0; }
75%, 100% { width: 0; top: 96px; left: 100px; }
}
? 关键注意事项：
- 所有动画总时长必须一致（如
2s），且分段严格按0%→25%→50%→75%→100%划分，确保无间隙； -
bottom动画的left值需从0→100px反向过渡，才能与right条末端自然衔接； - 若容器尺寸动态变化（如 Streamlit 中的
width/height参数），请将100px、96px等硬编码值替换为 CSS 自定义属性（如--size: 100px; --offset: calc(var(--size) - 4px);），提升可维护性； - 圆角区域本身无需额外 SVG 或 clip-path —— 精确的时间轴控制已使视觉动线“绕过”裁剪问题。
该方案纯 CSS 实现，零 JS 依赖，兼容 Chrome/Firefox/Safari，并已在 Streamlit 环境中验证有效。只需将上述样式注入 st.html() 即可获得流畅、无断裂的圆角环绕光效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
