文章详情

登录

短信预约-IT技能 免费直播动态提醒

选择考试省份

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS @property，让不可能变可能

2024-12-03 06:14

关注

根据 MDN -- CSS Property[1]，@property CSS at-rule 是 CSS Houdini API 的一部分, 它允许开发者显式地定义他们的 CSS 自定义属性，允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承。

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

CSS Property 如何使用呢?我们将通过一些简单的例子快速上手，并且着重介绍它在 CSS 动画中起到的关键性的作用，对 CSS 动画带来的巨大提升。

示例

正常而言，我们定义和使用一个 CSS 自定义属性的方法是这样的：

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

而有了 @property 规则之后，我们还可以像下述代码这样去定义个 CSS 自定义属性：

  1.  

简单解读下：

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

当然，在 JavaScript 内定义的写法也很简单，顺便一提：

  1.  

支持的 syntax 语法类型

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

syntax 中的 +、#、| 符号

定义的 CSS @property 变量的 syntax 语法接受一些特殊的类型定义。

OK，铺垫了这么多，那么为什么要使用这么麻烦的语法定义 CSS 自定义属性呢?CSS Houdini 定义的自定义变量的优势在哪里?下面我们一一娓娓道来。

使用 color syntax 语法类型作用于渐变

我们来看这样一个例子，我们有这样一个渐变的图案:

  1.  
  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. } 

得到的还是同样的一个渐变图：

我们再加上一个过渡效果：

  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. } 

看看鼠标 Hover 的时候，会发生什么：

 

虽然我们设定了 1s 的过渡动画 transition: 1s background，但是很可惜，CSS 是不支持背景渐变色的直接过渡变化的，我们得到的只是两帧之间的之间变化。

使用 CSS @property 进行改造

OK，接下来我们就是有本文的主角，使用 Houdini API 中的 CSS 自定义属性替换原本的 CSS 自定义属性。

简单进行改造一下，使用 color syntax 语法类型：

  1. @property --houdini-colorA { 
  2.   syntax: ''; 
  3.   inherits: false; 
  4.   initial-value: #fff; 
  5. } 
  6. @property --houdini-colorB { 
  7.   syntax: ''; 
  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 语法，定义了两个 CSS Houdini 自定义变量 --houdini-colorA 和 --houdini-colorB，在 hover 变化的时候，改变这两个颜色。

需要关注的是，我们设定的过渡语句 transition: 1s --houdini-colorA, 1s --houdini-colorB，在这里，我们是针对 CSS Houdini 自定义变量设定过渡，而不是针对 background 设定过渡动画，再看看这次的效果：

 

Wow，成功了，渐变色的变化从两帧的逐帧动画变成了补间动画，实现了从一个渐变色过渡到另外一个渐变色的效果!而这，都得益于 CSS Houdini 自定义变量的强大能力!

CodePen Demo -- CSS Houdini 自定义变量实现渐变色过渡动画[2]

使用 CSS @property 实现渐变背景色过渡动画

在上述的 DEMO 中，我们利用了 CSS Houdini 自定义变量，将原本定义在 background 的过渡效果嫁接到了 color 之上，而 CSS 是支持一个颜色变换到另外一个颜色的，这样，我们巧妙的实现了渐变背景色的过渡动画。

在之前我们有讨论过在 CSS 中有多少种方式可以实现渐变背景色过渡动画 -- 巧妙地制作背景色渐变动画![3]，到今天，我们又多了一种实现的方式!

  1. @property --colorA { 
  2.   syntax: ''; 
  3.   inherits: false; 
  4.   initial-value: fuchsia; 
  5. } 
  6. @property --colorC { 
  7.   syntax: ''; 
  8.   inherits: false; 
  9.   initial-value: #f79188; 
  10. } 
  11. @property --colorF { 
  12.   syntax: ''; 
  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 自定义变量实现渐变色过渡动画2[4]

conic-gradient 配合 CSS @property 实现饼图动画

OK，上面我们演示了 syntax 为 color 语法类型的情况。在文章一开头，我们还列举了非常多的 syntax 类型。

下面我们尝试下其他的类型，使用 percentage 百分比类型或者 angle 角度类型，实现一个饼图的 hover 动画。

如果我们还是使用传统的写法，利用角向渐变实现不同角度的饼图：

  1.  
  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. } 

将会得到这样一种效果，由于 conic-gradient 也是不支持过渡动画的，得到的是一帧向另外一帧的直接变化：

 

好，使用 CSS Houdini 自定义变量改造一下：

  1. @property --per { 
  2.   syntax: ''; 
  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 实现饼图动画[5]

以往使用纯 CSS 非常复杂才能实现的效果，如果可以轻松的达成，不得不感慨 CSS @property 强大的能力!

syntax 的 | 符号

顺便演示一下定义 Houdini 自定义变量时 syntax 的一些稍微复杂点的用法。

在 conic-gradient 中，我们可以使用百分比也可以使用角度作为关键字，上述的 DEMO 也可以改造成这样：

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

表示，我们的自定义属性即可以是一个百分比值，也可以是一个角度值。

除了 | 符号外，还有 + 和 # 号分别表示接受以空格分隔、和以逗号分隔的属性，感兴趣的可以自行尝试。

使用 length 类型作用于一些长度变化

掌握了上述的技巧，我们就可以利用 Houdini 自定义变量的这个能力，去填补修复以前无法直接过渡动画的一些效果了。

过去，我们想实现这样一个文字下划线的 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. } 

因为 text-underline-offset 不支持过渡动画，得到的结果如下：

 

使用 Houdini 自定义变量改造，化腐朽为神奇：

  1. @property --offset { 
  2.   syntax: ''; 
  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]

实战一下，使用 CSS @property 配合 background 实现屏保动画

嗯，因为 CSS @property 的存在，让以前需要非常多 CSS 代码的工作，一下子变得简单了起来。

我们尝试利用 CSS @property 配合 background，简单的实现一个屏保动画。

我们利用 background 可以简单的得到这样一个图形，代码如下：

  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. } 

效果如下，还算可以的静态背景图：

在往常，我们想让它动起来，其实是需要费一定的功夫的，而现在，通过 CSS @property，对我们希望进行动画的一些元素细节进行改造，可以得到非常不错的动画效果：

  1. body, 
  2. html { 
  3.     width: 100%; 
  4.     height: 100%; 
  5. } 
  6.  
  7. @property --perA { 
  8.   syntax: ''; 
  9.   inherits: false; 
  10.   initial-value: 75%; 
  11. } 
  12.  
  13. @property --perB { 
  14.   syntax: ''; 
  15.   inherits: false; 
  16.   initial-value: 99%; 
  17. } 
  18.  
  19. @property --perC { 
  20.   syntax: ''; 
  21.   inherits: false; 
  22.   initial-value: 15%; 
  23. } 
  24.  
  25. @property --perD { 
  26.   syntax: ''; 
  27.   inherits: false; 
  28.   initial-value: 16%; 
  29. } 
  30.  
  31. @property --perE { 
  32.   syntax: ''; 
  33.   inherits: false; 
  34.   initial-value: 86%; 
  35. } 
  36.  
  37. @property --angle { 
  38.   syntax: ''; 
  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. } 

效果如下（因为 Gif 上传大小限制，加快了速率，截取了其中一部分，简单做个示意）:

 

整体的效果还是挺不错的，完整的 Demo 你可以戳这里：

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

参考文献：

CSS Properties and Values API Level 1[8]

最后

好了，本文到此结束，介绍了 CSS Houdini API 中的 CSS @property 部分，并且利用它实现了一些以往无法简单实现的动画效果，希望对你有帮助 :)

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS[9] ，持续更新，欢迎点个 star 订阅收藏。

如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

参考资料

[1]MDN -- CSS Property:

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

[2]CodePen Demo -- CSS Houdini 自定义变量实现渐变色过渡动画:

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

[3]巧妙地制作背景色渐变动画!:

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

[4]CodePen Demo -- CSS Houdini 自定义变量实现渐变色过渡动画2:

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

[5]CodePode Demo -- conic-gradient 配合 CSS @property 实现饼图动画:

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

 

来源：iCSS前端趣闻内容投诉

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题

  • 2024年上半年信息系统项目管理师第二批次真题及答案解析（完整版）

    难度     813人已做
    查看

  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看

  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看

  • 2024年上半年软考高项第一、二批次真题考点汇总（完整版）

    难度     435人已做
    查看

  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机

CSS @property，让不可能变可能

后端开发Css前端2024-12-03

css中可不可以定义变量

后端开发2024-04-02

css不可能实现的功能有哪些

后端开发2023-06-14

如何让人工智能变得可解释？

后端开发AI人工智能2024-12-01

css能不能让文字旋转

后端开发2023-07-05

是否有可能让人工智能变得更加透明?

后端开发人工智能AI2024-12-01

css如何让a标签不可用

后端开发2024-04-02

css里能不能用var变量

后端开发2024-04-02

css怎么让a标签不可点击

后端开发2023-06-14

你可能不知道的CSS技巧有哪些

后端开发2024-04-02

css如何实现不可点击功能样式

后端开发2024-04-02

你可能不知道的IE8 CSS Hack猎奇写法

你可能不知道的IE8 CSS Hack猎奇写法
后端开发2024-04-23

怎么让Table组件无限可能

后端开发2024-04-02

你可能不知道的 CSS 负值技巧与细节

后端开发CSS2024-12-03

七个迹象表明你可能不是变革型CIO

后端开发CIO2024-11-28

让智能建筑成为可能的关键技术

后端开发智能建筑IOT2024-12-02

5G 连接使智能变电站成为可能

后端开发5G2024-12-14

5G手机有可能变回4G吗？

后端开发2023-06-05

Spring中这些能升华代码的技巧，可能会让你爱不释手

后端开发spring升华代码的技巧2024-12-03

区块链不可能三角

后端开发区块链比特币2024-12-03
位置：首页-资讯-后端开发
咦！没有更多了？去看看其它编程学习网 内容吧
首页课程
资料下载问答资讯