金色流光边框

发表评论

使用 CSS Houdini 的 CSS Properties and Values API，通过 @property 注册一个具有 <angle> 类型的 CSS 自定义属性；再将该属性用于 conic-gradient()，并在 @keyframes 中改变它的角度值，就可以实现渐变角度的平滑插值动画

如果使用未通过 @property 注册的普通 CSS 自定义属性，浏览器无法识别其具体值类型，因此在动画过程中通常不能进行角度值插值，只会离散切换。

%title插图%num

下方是代码提供：

HTML
    <style>
        @property --angle {
            syntax: "<angle>";
            initial-value: 0deg;
            inherits: false;
        }

        @keyframes move {
            from {
                --angle: 0deg;
            }

            to {
                --angle: 360deg;
            }
        }

        .smm-gradient-box {
            padding: 10px 0;
            position: relative;
            margin: 50px auto;
            width: 100px;
            height: 100px;
            background-color: #6c07fa;
            border-radius: 8px;
        }

        .smm-gradient-box::after,
        .smm-gradient-box::before {
            box-sizing: content-box;
            position: absolute;
            border-radius: 8px;
            content: '';
            width: 100%;
            height: 100%;
            top: 50%;
            left: 50%;
            z-index: -1;
            padding: 3px;
            transform: translate(-50%, -50%);
            animation: 3s move infinite linear;
            background-image: conic-gradient(from var(--angle), transparent 60%, yellow);
        }

        .smm-gradient-box::before {
            filter: blur(5px);
            opacity: .8;
        }
    </style>
    <div class="smm-gradient-box"></div>

基于 CSS @property 规则 可以设置更多 CSS 属性的具体参数配置。

传统 CSS 变量（自定义属性）
:root {
    --angle: 0deg;  /* 没有类型检查 */
    --color: red;   /* 没有约束 */
}
CSS Houdini @property 规则
@property --angle {
    syntax: "<angle>";      /* 类型约束 */
    initial-value: 0deg;    /* 初始值 */
    inherits: false;        /* 继承性 */
}

CSS @property 中 syntax 支持的数据类型

数据类型语法示例值描述
角度<angle>45deg, 1.57rad, 0.25turn角度单位
颜色<color>#ff0000, rgb(255,0,0), hsl(0,100%,50%)颜色值
长度<length>10px, 2em, 5rem, 1cm长度单位
百分比<percentage>50%, 100%, 25.5%百分比值
数字<number>1, 0.5, -10, 3.14纯数字
整数<integer>1, -5, 100整数值
时间<time>1s, 500ms, 0.5s时间单位
分辨率<resolution>1dppx, 96dpi分辨率单位
自定义标识符identauto, none, inherit预定义标识符
URL<url>url(image.jpg)URL 地址
位置<position>center, left top, 50% 50%位置坐标
变换函数<transform-function>rotate(45deg), scale(2)变换函数
字符串<string>"hello", 'world'字符串值
布尔值不支持–不支持布尔类型

发表回复