一个简约的内部光晕卡片CSS动画

            
            @property --a {
    /* 必须注册 --a 才能对其进行动画处理 */
    syntax: '<angle>';
    initial-value: 0deg;
    /* 仅用于伪元素，不需要继承，
             * 设置为false可以提高性能 */
    inherits: false
}

.card {
    /* 隐藏光晕的外部部分 */
    overflow: hidden;
    /* 需要为绝对定位的伪元素设置 */
    position: relative;
    /* 根据需要调整宽度（如果确实需要设置的话） */
    width: Min(12em, 80vmin);
    /* 调整宽高比或高度（如果高度不是由内容决定） */
    aspect-ratio: 1;
    /* 圆角卡片边角 */
    border-radius: 1.2em;

    /* 以下是用于美化的文本和布局样式 */
    place-self: center;
    place-content: center;
    padding: .5em;
    color: #ededed;
    font: clamp(1em, 2vw + 2vh, 2em) sans-serif;
    text-align: center;
    text-transform: uppercase;
    text-wrap: balance
}

.card::before {
    /* 当堆叠项是文本节点时，网格不适用于堆叠 */
    position: absolute;
    /* 放在卡片内容后面，使卡片文本可选择等 */
    z-index: -1;
    /* 最好将inset设置为边框宽度的一半（带负号） */
    inset: -1em;
    /* 为边框预留空间 */
    border: solid 1.25em;
    border-image:
        /* 根据需要调整渐变，这里只是使用了随机调色板 */
                conic-gradient(from var(--a), #FF6B6B, #4ECDC4, #45B7D1,
                    #96CEB4, #FFEEAD, #D4A5A5, #9B59B6,
                    #3498DB, #E74C3C, #2ECC71, #FF6B6B) 1;
    /* 模糊此伪元素 */
    filter: blur(.75em);
    /* 根据需要调整动画持续时间 */
    animation: a 4s linear infinite;
    /* 需要显示伪元素 */
    content: ''
}

/* 将 --a 从初始值 0deg 动画到 1turn */
@keyframes a {
    to {
        --a: 1turn
    }
}

/* 美化和布局相关样式 */
html,
body,
div {
    display: grid
}

html {
    min-height: 100%
}

body {
    background:
        /* 加个背景仅用于展示卡片透明度 */
        url(https://cloud-static.com/gallery/1001/5.jpg) 50%/ cover #212121;
    background-blend-mode: multiply
}