概述
@property 可以在 CSS 中創(chuàng)建自定義屬性。
CSS 中，已經(jīng)有使用 --* 形式定義的變量。@property 作為其加強(qiáng)版，多了幾個(gè)設(shè)置：
- ?? 類型校驗(yàn)（syntax）：可以限制變量可以被賦值的類型。（CSS 版的 TypeScript 了屬于是）
- ?? 繼承控制（inherits）：決定該屬性是否隨父元素繼承。
- ??? 默認(rèn)值（initial-value）
類型校驗(yàn)
允許的類型
<angle>, <basic-shape>, <blend-mode>, <color>, <custom-ident>, <filter-function>, <flex>, <frequency>, <gradient>, <image>, <integer>, <length>, <number>, <percentage>, <position>, <ratio>, <resolution>, <shape-box>, <single-transition-timing-function>, <string>, <time>, <transform-function>, <url>
繼承
要注意并不是父節(jié)點(diǎn)使用了變量，不會(huì)影響到子節(jié)點(diǎn)，而是父節(jié)點(diǎn)覆蓋了變量，不會(huì)影響到子節(jié)點(diǎn)。
使用例
漸變色平滑動(dòng)畫
css 中是無法直接建立對(duì)漸變色的平滑過渡的。
其原因是 linear-gradient 在 css 中，更接近于按圖片處理。無法對(duì)其中的八進(jìn)制顏色值添加漸變效果。
那么將其中的顏色值拆出來成變量，再對(duì)其添加動(dòng)畫呢？
很遺憾也不行，普通變量不支持動(dòng)畫。其效果也會(huì)像上面那張動(dòng)圖一樣。
但是，用 @property 來定義變量，就能夠支持動(dòng)畫：
動(dòng)畫計(jì)數(shù)器
由上例可知 @property 對(duì)動(dòng)畫有支持，那么可以設(shè)置一個(gè)“萬能”的動(dòng)畫計(jì)數(shù)器。
定義 --seed 來表示動(dòng)畫進(jìn)度，效果如下：
暫無評(píng)論，快來評(píng)論吧!