本文详解如何修复 css 光效动画在圆角（尤其是 top-left-radius）处消失的问题，通过精准调整关键帧时间轴与元素定位，使发光条始终紧贴容器边缘运动，实现真正的“绕边”视觉效果。
本文详解如何修复 css 光效动画在圆角（尤其是 top-left-radius）处消失的问题，通过精准调整关键帧时间轴与元素定位，使发光条始终紧贴容器边缘运动，实现真正的“绕边”视觉效果。
在构建具有高亮边框动画（如 glow ray bend 效果）的卡片组件时，一个常见痛点是：当动画行进至带有大圆角（如 border-top-left-radius: 80px）的角落时，发光条会因 overflow: hidden 或关键帧定位偏差而被裁剪或“消失”。根本原因并非圆角本身不可穿透，而是动画路径未与圆角几何轮廓对齐——即发光条仍按直角矩形路径运动，却受限于圆角容器的裁剪边界。
✅ 正确解法不是“绕开圆角”，而是让动画逻辑主动适配圆角起止点。核心策略有三：
- 时间轴无缝衔接：将四段动画（left → top → right → bottom）的关键帧百分比严格错位分配（如 0–25%、25–50%、50–75%、75–100%），避免空白过渡期；
-
起止坐标动态对齐：例如
top动画的4px高发光条，其起点需从left: 4px（避开左上圆角内切点）开始；终点需停在left: width - 4px - border-radius处，确保进入右上圆角前不溢出； -
禁用
overflow: hidden干扰：若必须保留圆角视觉，可改用mask或clip-path精确裁剪，而非粗暴overflow: hidden（后者会直接裁掉处于过渡态的发光条）。
以下为优化后的完整 CSS 实现（适配 top-left-radius: 80px 的 100×100px 容器）：
.holder {
position: relative;
width: 100px;
height: 100px;
background: #1a1a1a;
border-radius: 10px;
border-top-left-radius: 80px; /* 关键圆角 */
/* 注意：此处移除 overflow: hidden */
}
.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;
}
12.5% { height: 96px; top: 4px; left: 0; } /* 延伸至圆角起始Y */
25% { height: 0; top: 4px; left: 0; } /* 在圆角起点收束 */
}
.top {
height: 4px;
animation: top 2s linear infinite;
}
@keyframes top {
25%, 50% {
width: 0; top: 0; left: 4px; /* 起点右移4px，避开左上圆角内切区域 */
}
37.5% { width: 88px; top: 0; left: 4px; } /* 终点预留8px给右上圆角 */
50% { width: 0; top: 0; left: 92px; }
}
.right {
width: 4px;
animation: right 2s linear infinite;
}
@keyframes right {
50%, 75% {
height: 0; top: 0; left: 96px;
}
62.5% { height: 96px; top: 0; left: 96px; }
75% { height: 0; top: 96px; left: 96px; }
}
.bottom {
height: 4px;
animation: bottom 2s linear infinite;
}
@keyframes bottom {
75%, 100% {
width: 0; top: 96px; left: 96px;
}
87.5% { width: 88px; top: 96px; left: 8px; } /* 左端留白，衔接左下圆角 */
100% { width: 0; top: 96px; left: 0; }
}
⚠️ 关键注意事项：
-
尺寸耦合性：
left: 4px、width: 88px等值需根据实际border-radius和发光条宽度动态计算（公式：可用宽度 = 总宽 - 2 × 发光条宽 - 圆角半径）； -
Streamlit 集成提示：在
st.html()中使用时，建议将<style></style>提升至全局或使用st.markdown(..., unsafe_allow_html=True)避免样式作用域限制； -
现代浏览器兼容性：移除
-webkit-前缀，直接使用标准@keyframes和animation，仅在必要时添加@supports (animation-name: test) { ... }回退。
最终效果：发光条将如一道柔光射线，平滑地“弯折”经过左上圆角，无任何闪烁或裁剪，真正实现专业级边缘光效动画。
