Houdini

如下是一个带渐变边框的卡片，想要让渐变边框旋转起来。

目前是静态的，css 是

.card {
    background: linear-gradient(8deg, #5ddcff, #3c67e3 43%, #4e00c2);
    position: relative;
    width: 200px;
    height: 500px;
    border-radius: 20px;
    margin-top: 20px;
    animation: spin 3s linear infinite;
}
.card::before {
    content: '';
    position: absolute;
    inset: 0px;
    background: inherit;
    border-radius: inherit;
    z-index: -1;
    filter: blur(20px);
}
.card::after {
    content: '';
    position: absolute;
    inset: 8px;
    background: #191c29;
    border-radius: inherit;
}

接下来写一个动画，试图让渐变色旋转。

@keyframes spin {
    to {
        background: linear-gradient(360deg, #5ddcff, #3c67e3 43%, 4e00c2);
    }
}

再把动画加到 .card 上。

.card {
    /* ... */
    animation: spin 3s linear infinite;
}

会发现背景没有变化，是因为 background: linear-gradient 生成的是一张背景图，图片的内容是不能用动画控制的。

使用 Houdini API

Houdini API 用于定义一个 css 属性。

@property --direc {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

属性名 --direc，语法是角度，初始值 0deg，不继承。

然后把这个属性用到元素上。

.card {
    --direc: 0deg;      
    background: linear-gradient(8deg, #5ddcff, #3c67e3 43%, #4e00c2); 
    background: linear-gradient(var(--direc), #5ddcff, #3c67e3 43%, #4e00c2); 
    position: relative;
    width: 200px;
    height: 500px;
    border-radius: 20px;
    margin-top: 20px;
}

@keyframes spin {
    to {
        background: linear-gradient(360deg, #5ddcff, #3c67e3 43%, #4e00c2); 
        --direc: 360deg; 

    }
}

完事。