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教程