如何让发光动画沿带左上圆角的卡片边框完整绕行？

问题根源是动画路径未适配圆角的圆弧轨迹，且卡片的溢出裁剪设置导致动画元素在圆角区域被隐藏。以下是修改后的代码，任选其一即可：

纯HTML/CSS版本 #

<!DOCTYPE html>
<html>
<head>
    <style>
        .card {
            width: 300px;
            height: 200px;
            background: #fff;
            border-radius: 80px 10px 10px 10px; /* 左上80px圆角 */
            position: relative;
            overflow: visible; /* 取消溢出裁剪，避免动画元素被隐藏 */
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .card::before {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            background: linear-gradient(90deg, #0066ff, #00ffff);
            border-radius: 50%;
            animation: glowMove 4s linear infinite;
            /* 定义包含左上圆角圆弧的完整边框路径 */
            offset-path: path('M 80 0 L 300 0 L 300 200 L 0 200 L 0 80 A 80 80 0 0 1 80 0');
            offset-rotate: auto; /* 让动画元素随路径方向自动旋转 */
        }

        @keyframes glowMove {
            0% {
                offset-distance: 0%;
            }
            100% {
                offset-distance: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="card"></div>
</body>
</html>

Streamlit Python版本 #

import streamlit as st

st.markdown("""
<style>
    .custom-card {
        width: 300px;
        height: 200px;
        background: #ffffff;
        border-radius: 80px 10px 10px 10px;
        position: relative;
        overflow: visible;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        margin: 2rem auto;
    }

    .custom-card::before {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        background: linear-gradient(90deg, #0066ff, #00ffff);
        border-radius: 50%;
        animation: glowMove 4s linear infinite;
        offset-path: path('M 80 0 L 300 0 L 300 200 L 0 200 L 0 80 A 80 80 0 0 1 80 0');
        offset-rotate: auto;
    }

    @keyframes glowMove {
        0% {
            offset-distance: 0%;
        }
        100% {
            offset-distance: 100%;
        }
    }
</style>
""", unsafe_allow_html=True)

st.markdown('<div class="custom-card"></div>', unsafe_allow_html=True)

关键修改点 #

1. 取消溢出裁剪：将卡片的overflow设为visible，确保动画元素在圆角区域不会被裁剪隐藏。
2. 适配圆角路径：使用offset-path定义包含左上圆角圆弧的完整边框轨迹，A 80 80 0 0 1 80 0这段代码专门绘制左上80px的圆角圆弧，让动画元素能沿着曲线完整移动。
3. 路径方向适配：offset-rotate: auto让动画元素随路径方向自动调整角度，移动更自然。

内容的提问来源于stack exchange，提问作者ankit maltare