CSS @property,让不可能变可能

avatar

 @Property,它的出现,极大的增强的 CSS 的能力!

举个栗子(截取原文有意思的一个例子进行简单说明)

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

:root {
    --whiteColor: #fff;
}

p {
    color: (--whiteColor);
}

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

<style>
@property --property-name {
  syntax: '<color>';
  inherits: false;
  initial-value: #fff;
}

p {
    color: var(--property-name);
}
</style>

--property-name 就是自定义属性的名称,var(--property-name) 引用

conic-gradient 实现饼图动画

<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%); 
    }
}

syntax 的 | 符号

顺便演示一下定义 Houdini 自定义变量时 syntax 的一些稍微复杂点的用法。 将会得到这样一种效果,由于 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%;
    }
}

看看改造后的效果:

是不是特别丝滑,还有很多属性,小伙伴们可以参考+测试。。。

原文直达车:github.com/chokcoco/iC…