CSS @property属性实现了什么？

1.@property是什么

@property 是 CSS Houdini API 的一部分, 它允许开发者显式地定义他们的 CSS 自定义属性，允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承。（兼容性不是很好）

• CSS Houdini开放 CSS 的底层 API 给开发者，使得开发者可以通过这套接口自行扩展
  CSS，并提供相应的工具允许开发者介入浏览器渲染引擎的样式和布局流程中，使开发人员可以编写浏览器可以解析的 CSS 代码，从而创建新的
  CSS 功能。

2.如何使用

语法

@property --propery-name {
  syntax: '<color>';
  inherits: false;
  initial-value: #fff;
}

• --property-name 就是自定义属性的名称，定义后可在 CSS 中通过 var(--property-name) 进行引用
• syntax：该自定义属性的语法规则，也可以理解为表示定义的自定义属性的类型
• inherits：是否允许继承
• initial-value：初始值

其中，@property 规则中的 syntax 和 inherits 描述符是必需的。

eg：

@property color-cust {
  syntax: '<color>';
  inherits: false;
  initial-value: #ccc;
}

等价于

window.CSS.registerProperty({
  name: 'color-cust',
  syntax: '<color>',
  inherits: false,
  initialValue: '#c0ffee',
});

支持的 syntax 语法类型
syntax 支持的语法类型非常丰富，基本涵盖了所有你能想到的类型。

length
number
percentage
length-percentage
color
image
url
integer
angle
time
resolution
transform-list
transform-function
custom-ident (a custom identifier string)

syntax 中的 +、#、| 符号
定义的 CSS @property 变量的 syntax 语法接受一些特殊的类型定义。

syntax: '<color#>' ：接受逗号分隔的颜色值列表
syntax: '<length+>' ：接受以空格分隔的长度值列表
syntax: '<length | length+>'：接受单个长度或者以空格分隔的长度值列表

3.用来实现什么

1.渐变色过渡

CSS 是不支持背景渐变色的直接过渡变化的

:root {
    --colorA: #55aa00;
        --colorB: #000;
    }
    
    .c {
        width: 400px;
        height: 400px;
        background: linear-gradient(45deg, var(--colorA), var(--colorB));
    }

在这里插入图片描述

鼠标悬浮，如何实现一个过渡效果呢？

@property --colorA {
    syntax: '<color>';
    inherits: false;
    initial-value: #55aa00;
}

@property --colorB {
    syntax: '<color>';
    inherits: false;
    initial-value: #000;
}

.c {
    background: linear-gradient(45deg, var(--colorA), var(--colorB));
    transition: 1s --colorA, 1s --colorB;
}

.c:hover {
    --colorA: blue;
    --colorB: yellow;
}

property1.gif

2.渐变背景色过渡动画

@property --colorC {
    syntax: '<color>';
    inherits: false;
    initial-value: pink;
}

@property --colorD {
    syntax: '<color>';
    inherits: false;
    initial-value: #55557f;
}

@property --colorE {
    syntax: '<color>';
    inherits: false;
    initial-value: red;
}

.d {
    width: 200px;
    height: 200px;
    background: linear-gradient(45deg,
            var(--colorC),
            var(--colorD),
            var(--colorE));
    animation: change 10s infinite linear;
}

@keyframes change {
    20% {
        --colorC: blue;
        --colorD: #aa0000;
        --colorE: #13a8aa;
    }

    40% {
        --colorC: red;
        --colorD: #00aa7f;
        --colorE: #00557f;
    }

    60% {
        --colorC: #999;
        --colorD: #000;
        --colorE: #fff;
    }

    80% {
        --colorC: #222;
        --colorD: #ff55ff;
        --colorE: #555500;
    }
}

property2.gif

3.实现loading加载

.loading {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(pink, #333 var(--per), transparent var(--per), transparent 100%);
    /* transition: --per 300ms linear; */
    animation: l 4s infinite linear;
}

@keyframes l {
    to {
        --per: 102%
    }
}

property3.gif

4.border的hover效果

.f {
        font-size: 30px;
        border: 8px solid #222;
        padding: 20px;
        border-image: conic-gradient(from var(--angle), pink, #e6d3ff 0.1turn, pink 0.15turn, #393b3e 0.25turn) 30;
        animation: aa 2s linear infinite forwards;
    }

    @keyframes aa {
        100% {
            --angle: 420deg;
        }
    }

property4.gif

4.更多cssdemo合集，关注苏苏的码云！

参考：

https://segmentfault.com/a/1190000039826626?utm_source=sf-similar-article