本文详解如何让发光动画条无缝绕过带大圆角（如 top-left-radius: 80px）的容器边界，解决动画在圆角处“消失”的问题，通过精准调整关键帧时间轴与起止位置实现视觉连续性。
本文详解如何让发光动画条无缝绕过带大圆角（如 top-left-radius: 80px）的容器边界，解决动画在圆角处“消失”的问题，通过精准调整关键帧时间轴与起止位置实现视觉连续性。
在构建高表现力的卡片动效时，常使用四段独立动画（left/top/right/bottom）模拟光束沿边框流动的效果。但当容器设置了较大的 border-top-left-radius（如 80px）时，原始动画因未适配圆角路径，在左上角区域会因裁剪（overflow: hidden）或定位偏差而“断开”——看似光束凭空消失，实则是动画元素未能覆盖圆角过渡区。
根本原因在于：各边动画的时间轴彼此割裂、衔接点错位，且未考虑圆角带来的几何偏移。例如，.top 动画结束于 left: 100px（直角右顶点），而 .left 动画在 25% 处已退至 height: 0，导致左上角约 25% 的时间窗口内无光束覆盖，恰好被 border-radius 裁切。
✅ 正确解法是：统一动画周期，精确分配每段动画的活跃区间，并让相邻动画在圆角交接区形成 10–20% 的重叠缓冲。以下是优化后的核心 CSS 策略：
✅ 关键帧重排：4 阶段无缝接力（总周期 2s）
/* 左侧条：0% → 25% 激活（从底到顶） */
@-webkit-keyframes left {
0% { height: 0; top: 96px; left: 0; }
25% { height: 100px; top: 0; left: 0; }
50% { height: 0; top: 0; left: 0; } /* 在顶部停留至 50%，为圆角过渡留白 */
}
/* 顶部条：25% → 50% 激活（从左到右），起始即覆盖左上圆角 */
@-webkit-keyframes top {
25% { width: 0; top: 0; left: 0; } /* 圆角起点：left=0, top=0 */
50% { width: 100px; top: 0; left: 0; } /* 直线延伸至右顶点 */
75% { width: 0; top: 0; left: 100px; } /* 快速收束，避免遮挡右上角 */
}
/* 右侧条：50% → 75% 激活（从顶到底） */
@-webkit-keyframes right {
50% { height: 0; top: 0; left: 96px; }
75% { height: 100px; top: 0; left: 96px; }
100% { height: 0; top: 100px; left: 96px; }
}
/* 底部条：75% → 100% 激活（从右到左），并反向补足左下圆角 */
@-webkit-keyframes bottom {
25% { width: 0; top: 96px; left: 0; } /* 提前在 25% 初始化位置（兼容循环） */
75% { width: 0; top: 96px; left: 96px; }
100% { width: 100px; top: 96px; left: 0; }
}
⚠️ 必须同步配置的容器样式
.holder {
position: absolute;
top: 45%; left: 45%;
width: 100px; height: 100px;
background: #1a1a1a;
border-radius: 10px;
border-top-left-radius: 80px; /* 关键：大圆角 */
overflow: hidden; /* 保留裁切，但动画已适配其边界 */
}
? 进阶提示：适配动态尺寸（Streamlit 场景）
若在 Python Streamlit 中调用（如原 display_animated_box()），需将 @keyframes 中的硬编码值（如 96px, 100px）替换为计算变量：
# 在 f-string 中动态注入
html_content = f"""
<style>
@keyframes top {{
25% {{ width: 0; top: 0; left: 0; }}
50% {{ width: {width}px; top: 0; left: 0; }}
75% {{ width: 0; top: 0; left: {width}px; }}
}}
/* 其他动画同理... */
</style>
...
"""
✅ 验证效果的黄金法则
- 所有
.bar元素必须设置border-radius: 4px（匹配光束粗细），避免尖锐边缘破坏辉光感； - 动画总时长（
2s或10s）需一致，否则节奏断裂； - 使用浏览器 DevTools 的 Animation Inspector 逐帧检查各
@keyframes在 0%→100% 区间的覆盖连续性。
通过此方案，光束将自然“绕行”左上圆角——视觉上不再是直线折返，而是平滑过渡，彻底消除闪烁或消失现象，真正实现专业级边框辉光动效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
