1.@property是什么

@property 是 CSS Houdini API 的一部分, 它允許開發(fā)者顯式地定義他們的 CSS 自定義屬性，允許進(jìn)行屬性類型檢查、設(shè)定默認(rèn)值以及定義該自定義屬性是否可以被繼承。（兼容性不是很好）

• CSS Houdini開放 CSS 的底層 API 給開發(fā)者，使得開發(fā)者可以通過這套接口自行擴(kuò)展
  CSS，并提供相應(yīng)的工具允許開發(fā)者介入瀏覽器渲染引擎的樣式和布局流程中，使開發(fā)人員可以編寫瀏覽器可以解析的 CSS 代碼，從而創(chuàng)建新的
  CSS 功能。

2.如何使用

語法

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

• --property-name 就是自定義屬性的名稱，定義后可在 CSS 中通過 var(--property-name) 進(jìn)行引用
• syntax：該自定義屬性的語法規(guī)則，也可以理解為表示定義的自定義屬性的類型
• inherits：是否允許繼承
• initial-value：初始值

其中，@property 規(guī)則中的 syntax 和 inherits 描述符是必需的。

eg：

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

等價(jià)于

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+>'：接受單個(gè)長度或者以空格分隔的長度值列表

3.用來實(shí)現(xiàn)什么

1.漸變色過渡

CSS 是不支持背景漸變色的直接過渡變化的

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

在這里插入圖片描述

鼠標(biāo)懸浮，如何實(shí)現(xiàn)一個(gè)過渡效果呢？

@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.漸變背景色過渡動(dòng)畫

@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.實(shí)現(xiàn)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合集，關(guān)注蘇蘇的碼云！

參考：

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