CSS @property，讓不可能變可能

時間  2021-08-14
標籤 css html 前端 git github api 瀏覽器 markdown app ide 欄目 CSS 简体版
原文   原文鏈接

本文主要講講 CSS 很是新的一個特性，CSS @property，它的出現，極大的加強的 CSS 的能力！css

根據 MDN -- CSS Property，@property CSS at-rule 是 CSS Houdini API 的一部分, 它容許開發者顯式地定義他們的 CSS 自定義屬性，容許進行屬性類型檢查、設定默認值以及定義該自定義屬性是否能夠被繼承。html

CSS Houdini 又是什麼呢，CSS Houdini 開放 CSS 的底層 API 給開發者，使得開發者能夠經過這套接口自行擴展 CSS，並提供相應的工具容許開發者介入瀏覽器渲染引擎的樣式和佈局流程中，使開發人員能夠編寫瀏覽器能夠解析的 CSS 代碼，從而建立新的 CSS 功能。固然，它不是本文的重點，不過多描述。前端

CSS Property 如何使用呢？咱們將經過一些簡單的例子快速上手，而且着重介紹它在 CSS 動畫中起到的關鍵性的做用，對 CSS 動畫帶來的巨大提高。git

示例

正常而言，咱們定義和使用一個 CSS 自定義屬性的方法是這樣的：github

:root {
    --whiteColor: #fff;
}

p {
    color: (--whiteColor);
}
複製代碼

而有了 @property 規則以後，咱們還能夠像下述代碼這樣去定義個 CSS 自定義屬性：api

<style> @property --property-name { syntax: '<color>'; inherits: false; initial-value: #fff; } p { color: var(--property-name); } </style>
複製代碼

簡單解讀下：瀏覽器

  • @property --property-name 中的 --property-name 就是自定義屬性的名稱，定義後可在 CSS 中經過 var(--property-name) 進行引用
  • syntax：該自定義屬性的語法規則，也能夠理解爲表示定義的自定義屬性的類型
  • inherits：是否容許繼承
  • initial-value：初始值

其中，@property 規則中的 syntax 和 inherits 描述符是必需的。markdown

固然，在 JavaScript 內定義的寫法也很簡單，順便一提：app

<script>
CSS.registerProperty({
  name: "--property-name",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee"
});
</script>
複製代碼

支持的 syntax 語法類型

syntax 支持的語法類型很是豐富，基本涵蓋了全部你能想到的類型。ide

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

OK，鋪墊了這麼多，那麼爲何要使用這麼麻煩的語法定義 CSS 自定義屬性呢？CSS Houdini 定義的自定義變量的優點在哪裏？下面咱們一一娓娓道來。

使用 color syntax 語法類型做用於漸變

咱們來看這樣一個例子，咱們有這樣一個漸變的圖案：

<div></div>
複製代碼
div {
    background: linear-gradient(45deg, #fff, #000);
}
複製代碼

咱們改造下上述代碼，改成使用 CSS 自定義屬性：

:root {
    --colorA: #fff;
    --colorB: #000;
}
div {
    background: linear-gradient(45deg, var(--colorA), var(--colorB));
}
複製代碼

獲得的仍是一樣的一個漸變圖：

咱們再加上一個過渡效果：

:root {
    --colorA: #fff;
    --colorB: #000;
}
div {
    background: linear-gradient(45deg, var(--colorA), var(--colorB));
    transition: 1s background;
    
    &:hover {
        --colorA: yellowgreen;
        --colorB: deeppink;
    }
}
複製代碼

看看鼠標 Hover 的時候，會發生什麼：

雖然咱們設定了 1s 的過渡動畫 transition: 1s background，可是很惋惜，CSS 是不支持背景漸變色的直接過渡變化的，咱們獲得的只是兩幀之間的之間變化。

使用 CSS @property 進行改造

OK，接下來咱們就是有本文的主角，使用 Houdini API 中的 CSS 自定義屬性替換本來的 CSS 自定義屬性。

簡單進行改造一下，使用 color syntax 語法類型：

@property --houdini-colorA {
  syntax: '<color>';
  inherits: false;
  initial-value: #fff;
}
@property --houdini-colorB {
  syntax: '<color>';
  inherits: false;
  initial-value: #000;
}
.property {
    background: linear-gradient(45deg, var(--houdini-colorA), var(--houdini-colorB));
    transition: 1s --houdini-colorA, 1s --houdini-colorB;
    
    &:hover {
        --houdini-colorA: yellowgreen;
        --houdini-colorB: deeppink;
    }
}
複製代碼

咱們使用了 @property 語法，定義了兩個 CSS Houdini 自定義變量 --houdini-colorA 和 --houdini-colorB，在 hover 變化的時候，改變這兩個顏色。

須要關注的是，咱們設定的過渡語句 transition: 1s --houdini-colorA, 1s --houdini-colorB，在這裏，咱們是針對 CSS Houdini 自定義變量設定過渡，而不是針對 background 設定過渡動畫，再看看此次的效果：

Wow，成功了，漸變色的變化從兩幀的逐幀動畫變成了補間動畫，實現了從一個漸變色過渡到另一個漸變色的效果！而這，都得益於 CSS Houdini 自定義變量的強大能力！

CodePen Demo -- CSS Houdini 自定義變量實現漸變色過渡動畫

使用 CSS @property 實現漸變背景色過渡動畫

在上述的 DEMO 中，咱們利用了 CSS Houdini 自定義變量，將本來定義在 background 的過渡效果嫁接到了 color 之上，而 CSS 是支持一個顏色變換到另一個顏色的，這樣，咱們巧妙的實現了漸變背景色的過渡動畫。

在以前咱們有討論過在 CSS 中有多少種方式能夠實現漸變背景色過渡動畫 -- 巧妙地製做背景色漸變更畫！，到今天，咱們又多了一種實現的方式！

@property --colorA {
  syntax: '<color>';
  inherits: false;
  initial-value: fuchsia;
}
@property --colorC {
  syntax: '<color>';
  inherits: false;
  initial-value: #f79188;
}
@property --colorF {
  syntax: '<color>';
  inherits: false;
  initial-value: red;
}
div {
    background: linear-gradient(45deg,
        var(--colorA),
        var(--colorC),
        var(--colorF));
    animation: change 10s infinite linear;
}

@keyframes change {
    20% {
        --colorA: red;
        --colorC: #a93ee0;
        --colorF: fuchsia;
    }
    40% {
        --colorA: #ff3c41;
        --colorC: #e228a0;
        --colorF: #2e4c96;
    }
    60% {
        --colorA: orange;
        --colorC: green;
        --colorF: teal;
    }
    80% {
        --colorA: #ae63e4;
        --colorC: #0ebeff;
        --colorF: #efc371;
    }
}
複製代碼

完整的代碼能夠戳這裏：

CodePen Demo -- CSS Houdini 自定義變量實現漸變色過渡動畫2

conic-gradient 配合 CSS @property 實現餅圖動畫

OK，上面咱們演示了 syntax 爲 color 語法類型的狀況。在文章一開頭，咱們還列舉了很是多的 syntax 類型。

下面咱們嘗試下其餘的類型，使用 percentage 百分比類型或者 angle 角度類型，實現一個餅圖的 hover 動畫。

若是咱們仍是使用傳統的寫法，利用角向漸變實現不一樣角度的餅圖：

<div></div>
複製代碼
.normal {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(yellowgreen, yellowgreen 25%, transparent 25%, transparent 100%); 
    transition: background 300ms;
    
    &:hover {
        background: conic-gradient(yellowgreen, yellowgreen 60%, transparent 60.1%, transparent 100%); 
    }
}
複製代碼

將會獲得這樣一種效果，因爲 conic-gradient 也是不支持過渡動畫的，獲得的是一幀向另一幀的直接變化：

好，使用 CSS Houdini 自定義變量改造一下：

@property --per {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 25%;
}

div {
    background: conic-gradient(yellowgreen, yellowgreen var(--per), transparent var(--per), transparent 100%); 
    transition: --per 300ms linear;
    
    &:hover {
        --per: 60%;
    }
}
複製代碼

看看改造後的效果：

CodePode Demo -- conic-gradient 配合 CSS @property 實現餅圖動畫

以往使用純 CSS 很是複雜才能實現的效果，若是能夠輕鬆的達成，不得不感慨 CSS @property 強大的能力！

syntax 的 | 符號

順便演示一下定義 Houdini 自定義變量時 syntax 的一些稍微複雜點的用法。

在 conic-gradient 中，咱們可使用百分比也可使用角度做爲關鍵字，上述的 DEMO 也能夠改形成這樣：

@property --per {
  syntax: '<percentage> | <angle>';
  inherits: false;
  initial-value: 25%;
}
...
複製代碼

表示，咱們的自定義屬性便可以是一個百分比值，也能夠是一個角度值。

除了 | 符號外，還有 + 和 # 號分別表示接受以空格分隔、和以逗號分隔的屬性，感興趣的能夠自行嘗試。

使用 length 類型做用於一些長度變化

掌握了上述的技巧，咱們就能夠利用 Houdini 自定義變量的這個能力，去填補修復之前沒法直接過渡動畫的一些效果了。

過去，咱們想實現這樣一個文字下劃線的 Hover 效果：

p {
    text-underline-offset: 1px;
    text-decoration-line: underline;
    text-decoration-color: #000;
    transition: all .3s;
    
    &:hover {
        text-decoration-color: orange;
        text-underline-offset: 10px;
        color: orange;
    }
}
複製代碼

由於 text-underline-offset 不支持過渡動畫，獲得的結果以下：

使用 Houdini 自定義變量改造，化腐朽爲神奇：

@property --offset {
  syntax: '<length>';
  inherits: false;
  initial-value: 0;
}
div {
    text-underline-offset: var(--offset, 1px);
	text-decoration: underline;
	transition: --offset 400ms, text-decoration-color 400ms;
    
    &:hover {
        --offset: 10px;
        color: orange;
	text-decoration-color: orange;
    }
}
複製代碼

能夠獲得絲滑的過渡效果：

CodePen Demo - Underlines hover transition(Chrome solution with Houdini)

實戰一下，使用 CSS @property 配合 background 實現屏保動畫

嗯，由於 CSS @property 的存在，讓之前須要很是多 CSS 代碼的工做，一會兒變得簡單了起來。

咱們嘗試利用 CSS @property 配合 background，簡單的實現一個屏保動畫。

咱們利用 background 能夠簡單的獲得這樣一個圖形，代碼以下：

html, body {
    width: 100%;
    height: 100%;
}
body {
    background-image:
        radial-gradient(
            circle at 86% 7%,
            rgba(40, 40, 40, 0.04) 0%,
            rgba(40, 40, 40, 0.04) 50%,
            rgba(200, 200, 200, 0.04) 50%,
            rgba(200, 200, 200, 0.04) 100%
        ),
        radial-gradient(
            circle at 15% 16%,
            rgba(99, 99, 99, 0.04) 0%,
            rgba(99, 99, 99, 0.04) 50%,
            rgba(45, 45, 45, 0.04) 50%,
            rgba(45, 45, 45, 0.04) 100%
        ),
        radial-gradient(
            circle at 75% 99%,
            rgba(243, 243, 243, 0.04) 0%,
            rgba(243, 243, 243, 0.04) 50%,
            rgba(37, 37, 37, 0.04) 50%,
            rgba(37, 37, 37, 0.04) 100%
        ),
        linear-gradient(rgb(34, 222, 237), rgb(135, 89, 215));
}
複製代碼

效果以下，還算能夠的靜態背景圖：

image

在往常，咱們想讓它動起來，實際上是須要費必定的功夫的，而如今，經過 CSS @property，對咱們但願進行動畫的一些元素細節進行改造，能夠獲得很是不錯的動畫效果：

body,
html {
    width: 100%;
    height: 100%;
}

@property --perA {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 75%;
}

@property --perB {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 99%;
}

@property --perC {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 15%;
}

@property --perD {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 16%;
}

@property --perE {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 86%;
}

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

body {
    background-image: 
        radial-gradient(
            circle at var(--perE) 7%,
            rgba(40, 40, 40, 0.04) 0%,
            rgba(40, 40, 40, 0.04) 50%,
            rgba(200, 200, 200, 0.04) 50%,
            rgba(200, 200, 200, 0.04) 100%
        ),
        radial-gradient(
            circle at var(--perC) var(--perD),
            rgba(99, 99, 99, 0.04) 0%,
            rgba(99, 99, 99, 0.04) 50%,
            rgba(45, 45, 45, 0.04) 50%,
            rgba(45, 45, 45, 0.04) 100%
        ),
        radial-gradient(
            circle at var(--perA) var(--perB),
            rgba(243, 243, 243, 0.04) 0%,
            rgba(243, 243, 243, 0.04) 50%,
            rgba(37, 37, 37, 0.04) 50%,
            rgba(37, 37, 37, 0.04) 100%
        ),
        linear-gradient(var(--angle), rgb(34, 222, 237), rgb(135, 89, 215));
    animation: move 30s infinite alternate linear;
}

@keyframes move {
    100% {
        --perA: 85%;
        --perB: 49%;
        --perC: 45%;
        --perD: 39%;
        --perE: 70%;
        --angle: 360deg;
    }
}
複製代碼

效果以下（由於 Gif 上傳大小限制，加快了速率，截取了其中一部分，簡單作個示意）:

property1

總體的效果仍是挺不錯的，完整的 Demo 你能夠戳這裏：

CodePen Demo -- CSS @property PureCSS Wrapper

參考文獻：

最後

好了，本文到此結束，介紹了 CSS Houdini API 中的 CSS @property 部分，而且利用它實現了一些以往沒法簡單實現的動畫效果，但願對你有幫助 :)

想 Get 到最有意思的 CSS 資訊，千萬不要錯過個人公衆號 -- iCSS前端趣聞 😄

更多精彩 CSS 技術文章彙總在個人 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。

若是還有什麼疑問或者建議，能夠多多交流，原創文章，文筆有限，才疏學淺，文中如有不正之處，萬望告知。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程