自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

CSS @property，讓不可能變可能

作者：SbCoco
開發(fā) 前端
本文主要講講 CSS 非常新的一個(gè)特性，CSS @property，它的出現(xiàn)，極大地增強(qiáng)的 CSS 的能力!

根據(jù) MDN -- CSS Property[1]，@property CSS at-rule 是 CSS Houdini API 的一部分, 它允許開發(fā)者顯式地定義他們的 CSS 自定義屬性，允許進(jìn)行屬性類型檢查、設(shè)定默認(rèn)值以及定義該自定義屬性是否可以被繼承。

CSS Houdini 又是什么呢，CSS Houdini 開放 CSS 的底層 API 給開發(fā)者，使得開發(fā)者可以通過這套接口自行擴(kuò)展 CSS，并提供相應(yīng)的工具允許開發(fā)者介入瀏覽器渲染引擎的樣式和布局流程中，使開發(fā)人員可以編寫瀏覽器可以解析的 CSS 代碼，從而創(chuàng)建新的 CSS 功能。當(dāng)然，它不是本文的重點(diǎn)，不過多描述。

CSS Property 如何使用呢?我們將通過一些簡單的例子快速上手，并且著重介紹它在 CSS 動(dòng)畫中起到的關(guān)鍵性的作用，對(duì) CSS 動(dòng)畫帶來的巨大提升。

示例

正常而言，我們定義和使用一個(gè) CSS 自定義屬性的方法是這樣的：

  1. :root { 
  2.     --whiteColor: #fff; 
  3. } 
  4.  
  5. p { 
  6.     color: (--whiteColor); 
  7. } 

而有了 @property 規(guī)則之后，我們還可以像下述代碼這樣去定義個(gè) CSS 自定義屬性：

  1. <style> 
  2. @property --property-name { 
  3.   syntax: '<color>'; 
  4.   inherits: false; 
  5.   initial-value: #fff; 
  6. } 
  7.  
  8. p { 
  9.     color: var(--property-name); 
  10. } 
  11. </style> 

簡單解讀下：

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

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

當(dāng)然，在 JavaScript 內(nèi)定義的寫法也很簡單，順便一提：

  1. <script> 
  2. CSS.registerProperty({ 
  3.   name: "--property-name", 
  4.   syntax: "<color>", 
  5.   inherits: false, 
  6.   initialValue: "#c0ffee" 
  7. }); 
  8. </script> 

支持的 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 中的 +、#、| 符號(hào)

定義的 CSS @property 變量的 syntax 語法接受一些特殊的類型定義。

  • syntax: '
  • syntax: '
  • syntax: ''：接受單個(gè)長度或者以空格分隔的長度值列表

OK，鋪墊了這么多，那么為什么要使用這么麻煩的語法定義 CSS 自定義屬性呢?CSS Houdini 定義的自定義變量的優(yōu)勢在哪里?下面我們一一娓娓道來。

使用 color syntax 語法類型作用于漸變

我們來看這樣一個(gè)例子，我們有這樣一個(gè)漸變的圖案:

  1. <div></div> 
  1. div { 
  2.     background: linear-gradient(45deg, #fff, #000); 
  3. } 

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

  1. :root { 
  2.     --colorA: #fff; 
  3.     --colorB: #000; 
  4. } 
  5. div { 
  6.     background: linear-gradient(45deg, var(--colorA), var(--colorB)); 
  7. } 

得到的還是同樣的一個(gè)漸變圖：

我們?cè)偌由弦粋€(gè)過渡效果：

  1. :root { 
  2.     --colorA: #fff; 
  3.     --colorB: #000; 
  4. } 
  5. div { 
  6.     background: linear-gradient(45deg, var(--colorA), var(--colorB)); 
  7.     transition: 1s background; 
  8.      
  9.     &:hover { 
  10.         --colorA: yellowgreen; 
  11.         --colorB: deeppink; 
  12.     } 
  13. } 

看看鼠標(biāo) Hover 的時(shí)候，會(huì)發(fā)生什么：

 å›¾ç‰‡

雖然我們?cè)O(shè)定了 1s 的過渡動(dòng)畫 transition: 1s background，但是很可惜，CSS 是不支持背景漸變色的直接過渡變化的，我們得到的只是兩幀之間的之間變化。

使用 CSS @property 進(jìn)行改造

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

簡單進(jìn)行改造一下，使用 color syntax 語法類型：

  1. @property --houdini-colorA { 
  2.   syntax: '<color>'; 
  3.   inherits: false; 
  4.   initial-value: #fff; 
  5. } 
  6. @property --houdini-colorB { 
  7.   syntax: '<color>'; 
  8.   inherits: false; 
  9.   initial-value: #000; 
  10. } 
  11. .property { 
  12.     background: linear-gradient(45deg, var(--houdini-colorA), var(--houdini-colorB)); 
  13.     transition: 1s --houdini-colorA, 1s --houdini-colorB; 
  14.      
  15.     &:hover { 
  16.         --houdini-colorA: yellowgreen; 
  17.         --houdini-colorB: deeppink; 
  18.     } 
  19. } 

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

需要關(guān)注的是，我們?cè)O(shè)定的過渡語句 transition: 1s --houdini-colorA, 1s --houdini-colorB，在這里，我們是針對(duì) CSS Houdini 自定義變量設(shè)定過渡，而不是針對(duì) background 設(shè)定過渡動(dòng)畫，再看看這次的效果：

 å›¾ç‰‡

Wow，成功了，漸變色的變化從兩幀的逐幀動(dòng)畫變成了補(bǔ)間動(dòng)畫，實(shí)現(xiàn)了從一個(gè)漸變色過渡到另外一個(gè)漸變色的效果!而這，都得益于 CSS Houdini 自定義變量的強(qiáng)大能力!

CodePen Demo -- CSS Houdini 自定義變量實(shí)現(xiàn)漸變色過渡動(dòng)畫[2]

使用 CSS @property 實(shí)現(xiàn)漸變背景色過渡動(dòng)畫

在上述的 DEMO 中，我們利用了 CSS Houdini 自定義變量，將原本定義在 background 的過渡效果嫁接到了 color 之上，而 CSS 是支持一個(gè)顏色變換到另外一個(gè)顏色的，這樣，我們巧妙的實(shí)現(xiàn)了漸變背景色的過渡動(dòng)畫。

在之前我們有討論過在 CSS 中有多少種方式可以實(shí)現(xiàn)漸變背景色過渡動(dòng)畫 -- 巧妙地制作背景色漸變動(dòng)畫![3]，到今天，我們又多了一種實(shí)現(xiàn)的方式!

  1. @property --colorA { 
  2.   syntax: '<color>'; 
  3.   inherits: false; 
  4.   initial-value: fuchsia; 
  5. } 
  6. @property --colorC { 
  7.   syntax: '<color>'; 
  8.   inherits: false; 
  9.   initial-value: #f79188; 
  10. } 
  11. @property --colorF { 
  12.   syntax: '<color>'; 
  13.   inherits: false; 
  14.   initial-value: red; 
  15. } 
  16. div { 
  17.     background: linear-gradient(45deg, 
  18.         var(--colorA), 
  19.         var(--colorC), 
  20.         var(--colorF)); 
  21.     animation: change 10s infinite linear; 
  22. } 
  23.  
  24. @keyframes change { 
  25.     20% { 
  26.         --colorA: red; 
  27.         --colorC: #a93ee0; 
  28.         --colorF: fuchsia; 
  29.     } 
  30.     40% { 
  31.         --colorA: #ff3c41; 
  32.         --colorC: #e228a0; 
  33.         --colorF: #2e4c96; 
  34.     } 
  35.     60% { 
  36.         --colorA: orange; 
  37.         --colorC: green; 
  38.         --colorF: teal; 
  39.     } 
  40.     80% { 
  41.         --colorA: #ae63e4; 
  42.         --colorC: #0ebeff; 
  43.         --colorF: #efc371; 
  44.     } 
  45. } 

图片

完整的代碼可以戳這里：

CodePen Demo -- CSS Houdini 自定義變量實(shí)現(xiàn)漸變色過渡動(dòng)畫2[4]

conic-gradient 配合 CSS @property 實(shí)現(xiàn)餅圖動(dòng)畫

OK，上面我們演示了 syntax 為 color 語法類型的情況。在文章一開頭，我們還列舉了非常多的 syntax 類型。

下面我們嘗試下其他的類型，使用 percentage 百分比類型或者 angle 角度類型，實(shí)現(xiàn)一個(gè)餅圖的 hover 動(dòng)畫。

如果我們還是使用傳統(tǒng)的寫法，利用角向漸變實(shí)現(xiàn)不同角度的餅圖：

  1. <div></div> 
  1. .normal { 
  2.     width: 200px; 
  3.     height: 200px; 
  4.     border-radius: 50%; 
  5.     background: conic-gradient(yellowgreen, yellowgreen 25%, transparent 25%, transparent 100%);  
  6.     transition: background 300ms; 
  7.      
  8.     &:hover { 
  9.         background: conic-gradient(yellowgreen, yellowgreen 60%, transparent 60.1%, transparent 100%);  
  10.     } 
  11. } 

將會(huì)得到這樣一種效果，由于 conic-gradient 也是不支持過渡動(dòng)畫的，得到的是一幀向另外一幀的直接變化：

 å›¾ç‰‡

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

  1. @property --per { 
  2.   syntax: '<percentage>'; 
  3.   inherits: false; 
  4.   initial-value: 25%; 
  5. } 
  6.  
  7. div { 
  8.     background: conic-gradient(yellowgreen, yellowgreen var(--per), transparent var(--per), transparent 100%);  
  9.     transition: --per 300ms linear; 
  10.      
  11.     &:hover { 
  12.         --per: 60%; 
  13.     } 
  14. } 

看看改造后的效果：

 å›¾ç‰‡

CodePode Demo -- conic-gradient 配合 CSS @property 實(shí)現(xiàn)餅圖動(dòng)畫[5]

以往使用純 CSS 非常復(fù)雜才能實(shí)現(xiàn)的效果，如果可以輕松的達(dá)成，不得不感慨 CSS @property 強(qiáng)大的能力!

syntax 的 | 符號(hào)

順便演示一下定義 Houdini 自定義變量時(shí) syntax 的一些稍微復(fù)雜點(diǎn)的用法。

在 conic-gradient 中，我們可以使用百分比也可以使用角度作為關(guān)鍵字，上述的 DEMO 也可以改造成這樣：

  1. @property --per { 
  2.   syntax: '<percentage> | <angle>'; 
  3.   inherits: false; 
  4.   initial-value: 25%; 
  5. } 
  6. ... 

表示，我們的自定義屬性即可以是一個(gè)百分比值，也可以是一個(gè)角度值。

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

使用 length 類型作用于一些長度變化

掌握了上述的技巧，我們就可以利用 Houdini 自定義變量的這個(gè)能力，去填補(bǔ)修復(fù)以前無法直接過渡動(dòng)畫的一些效果了。

過去，我們想實(shí)現(xiàn)這樣一個(gè)文字下劃線的 Hover 效果：

  1. p { 
  2.     text-underline-offset: 1px; 
  3.     text-decoration-line: underline; 
  4.     text-decoration-color: #000; 
  5.     transition: all .3s; 
  6.      
  7.     &:hover { 
  8.         text-decoration-color: orange; 
  9.         text-underline-offset: 10px; 
  10.         color: orange; 
  11.     } 
  12. } 

因?yàn)?text-underline-offset 不支持過渡動(dòng)畫，得到的結(jié)果如下：

 å›¾ç‰‡

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

  1. @property --offset { 
  2.   syntax: '<length>'; 
  3.   inherits: false; 
  4.   initial-value: 0; 
  5. } 
  6. div { 
  7.     text-underline-offset: var(--offset, 1px); 
  8.  text-decoration: underline; 
  9.  transition: --offset 400ms, text-decoration-color 400ms; 
  10.      
  11.     &:hover { 
  12.         --offset: 10px; 
  13.         color: orange; 
  14.  text-decoration-color: orange; 
  15.     } 
  16. } 

可以得到絲滑的過渡效果：

 å›¾ç‰‡

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

實(shí)戰(zhàn)一下，使用 CSS @property 配合 background 實(shí)現(xiàn)屏保動(dòng)畫

嗯，因?yàn)?CSS @property 的存在，讓以前需要非常多 CSS 代碼的工作，一下子變得簡單了起來。

我們嘗試?yán)?CSS @property 配合 background，簡單的實(shí)現(xiàn)一個(gè)屏保動(dòng)畫。

我們利用 background 可以簡單的得到這樣一個(gè)圖形，代碼如下：

  1. html, body { 
  2.     width: 100%; 
  3.     height: 100%; 
  4. } 
  5. body { 
  6.     background-image: 
  7.         radial-gradient( 
  8.             circle at 86% 7%, 
  9.             rgba(40, 40, 40, 0.04) 0%, 
  10.             rgba(40, 40, 40, 0.04) 50%, 
  11.             rgba(200, 200, 200, 0.04) 50%, 
  12.             rgba(200, 200, 200, 0.04) 100% 
  13.         ), 
  14.         radial-gradient( 
  15.             circle at 15% 16%, 
  16.             rgba(99, 99, 99, 0.04) 0%, 
  17.             rgba(99, 99, 99, 0.04) 50%, 
  18.             rgba(45, 45, 45, 0.04) 50%, 
  19.             rgba(45, 45, 45, 0.04) 100% 
  20.         ), 
  21.         radial-gradient( 
  22.             circle at 75% 99%, 
  23.             rgba(243, 243, 243, 0.04) 0%, 
  24.             rgba(243, 243, 243, 0.04) 50%, 
  25.             rgba(37, 37, 37, 0.04) 50%, 
  26.             rgba(37, 37, 37, 0.04) 100% 
  27.         ), 
  28.         linear-gradient(rgb(34, 222, 237), rgb(135, 89, 215)); 
  29. } 

效果如下，還算可以的靜態(tài)背景圖：

在往常，我們想讓它動(dòng)起來，其實(shí)是需要費(fèi)一定的功夫的，而現(xiàn)在，通過 CSS @property，對(duì)我們希望進(jìn)行動(dòng)畫的一些元素細(xì)節(jié)進(jìn)行改造，可以得到非常不錯(cuò)的動(dòng)畫效果：

  1. body, 
  2. html { 
  3.     width: 100%; 
  4.     height: 100%; 
  5. } 
  6.  
  7. @property --perA { 
  8.   syntax: '<percentage>'; 
  9.   inherits: false; 
  10.   initial-value: 75%; 
  11. } 
  12.  
  13. @property --perB { 
  14.   syntax: '<percentage>'; 
  15.   inherits: false; 
  16.   initial-value: 99%; 
  17. } 
  18.  
  19. @property --perC { 
  20.   syntax: '<percentage>'; 
  21.   inherits: false; 
  22.   initial-value: 15%; 
  23. } 
  24.  
  25. @property --perD { 
  26.   syntax: '<percentage>'; 
  27.   inherits: false; 
  28.   initial-value: 16%; 
  29. } 
  30.  
  31. @property --perE { 
  32.   syntax: '<percentage>'; 
  33.   inherits: false; 
  34.   initial-value: 86%; 
  35. } 
  36.  
  37. @property --angle { 
  38.   syntax: '<angle>'; 
  39.   inherits: false; 
  40.   initial-value: 0deg; 
  41. } 
  42.  
  43. body { 
  44.     background-image:  
  45.         radial-gradient( 
  46.             circle at var(--perE) 7%, 
  47.             rgba(40, 40, 40, 0.04) 0%, 
  48.             rgba(40, 40, 40, 0.04) 50%, 
  49.             rgba(200, 200, 200, 0.04) 50%, 
  50.             rgba(200, 200, 200, 0.04) 100% 
  51.         ), 
  52.         radial-gradient( 
  53.             circle at var(--perC) var(--perD), 
  54.             rgba(99, 99, 99, 0.04) 0%, 
  55.             rgba(99, 99, 99, 0.04) 50%, 
  56.             rgba(45, 45, 45, 0.04) 50%, 
  57.             rgba(45, 45, 45, 0.04) 100% 
  58.         ), 
  59.         radial-gradient( 
  60.             circle at var(--perA) var(--perB), 
  61.             rgba(243, 243, 243, 0.04) 0%, 
  62.             rgba(243, 243, 243, 0.04) 50%, 
  63.             rgba(37, 37, 37, 0.04) 50%, 
  64.             rgba(37, 37, 37, 0.04) 100% 
  65.         ), 
  66.         linear-gradient(var(--angle), rgb(34, 222, 237), rgb(135, 89, 215)); 
  67.     animation: move 30s infinite alternate linear; 
  68. } 
  69.  
  70. @keyframes move { 
  71.     100% { 
  72.         --perA: 85%; 
  73.         --perB: 49%; 
  74.         --perC: 45%; 
  75.         --perD: 39%; 
  76.         --perE: 70%; 
  77.         --angle: 360deg; 
  78.     } 
  79. } 

效果如下（因?yàn)?Gif 上傳大小限制，加快了速率，截取了其中一部分，簡單做個(gè)示意）:

 å›¾ç‰‡

整體的效果還是挺不錯(cuò)的，完整的 Demo 你可以戳這里：

CodePen Demo -- CSS @property PureCSS Wrapper[7]

參考文獻(xiàn)：

CSS Properties and Values API Level 1[8]

最后

好了，本文到此結(jié)束，介紹了 CSS Houdini API 中的 CSS @property 部分，并且利用它實(shí)現(xiàn)了一些以往無法簡單實(shí)現(xiàn)的動(dòng)畫效果，希望對(duì)你有幫助 :)

更多精彩 CSS 技術(shù)文章匯總在我的 Github -- iCSS[9] ，持續(xù)更新，歡迎點(diǎn)個(gè) star 訂閱收藏。

如果還有什么疑問或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，萬望告知。

參考資料

[1]MDN -- CSS Property:

https://developer.mozilla.org/zh-CN/docs/Web/CSS/@property

[2]CodePen Demo -- CSS Houdini 自定義變量實(shí)現(xiàn)漸變色過渡動(dòng)畫:

https://codepen.io/Chokcoco/pen/eYgyWLB?editors=1100

[3]巧妙地制作背景色漸變動(dòng)畫!:

https://github.com/chokcoco/iCSS/issues/10

[4]CodePen Demo -- CSS Houdini 自定義變量實(shí)現(xiàn)漸變色過渡動(dòng)畫2:

https://codepen.io/Chokcoco/pen/Bapmzbd

[5]CodePode Demo -- conic-gradient 配合 CSS @property 實(shí)現(xiàn)餅圖動(dòng)畫:

https://codepen.io/Chokcoco/pen/QWdqMvo

[6]CodePen Demo - Underlines hover transition(Chrome solution with Houdini):

https://codepen.io/Chokcoco/pen/jOymJZR

[7]CodePen Demo -- CSS @property PureCSS Wrapper:

https://codepen.io/Chokcoco/pen/VwPxMBP

[8]CSS Properties and Values API Level 1:

https://drafts.css-houdini.org/css-properties-values-api-1/#at-property-rule

[9]Github -- iCSS:

https://github.com/chokcoco/iCSS

 

責(zé)任編輯：姜華 來源： iCSS前端趣聞
Css前端@property
相關(guān)推薦

2016-03-14 14:45:18

中華網(wǎng)

2014-07-17 10:38:30

大數(shù)據(jù)

2021-02-21 14:05:02

區(qū)塊鏈比特幣安全

2016-09-01 16:37:24

2012-04-10 08:58:26

小米

2019-01-02 06:26:02

API應(yīng)用程序編程接口應(yīng)用安全

2013-12-13 10:01:16

諾基亞安卓手機(jī)

2023-12-05 07:19:43

CAP定理分布式

2024-01-24 13:08:00

2023-05-09 08:59:09

ChatGPT程序員裁員

2025-04-17 09:00:00

架構(gòu)聊消息微信

2018-07-26 08:13:31

根服務(wù)器網(wǎng)絡(luò)TCP

2013-07-02 09:26:11

IntelCEO代工

2012-03-24 21:26:56

2009-11-05 09:34:00

虛擬化終結(jié)者

2021-05-31 09:42:39

谷歌隱私網(wǎng)絡(luò)安全

2011-12-22 21:08:14

HTC

2017-12-19 14:15:27

程序員愿望加班

2017-04-24 08:58:23

5GWiFi網(wǎng)絡(luò)
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)