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

使用 percentage 百分比类型或者 angle 角度类型，实现一个饼图的 hover 动画。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21423.html

如果我们还是使用传统的写法，利用角向渐变实现不同角度的饼图：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21423.html

<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 也是不支持过渡动画的，得到的是一帧向另外一帧的直接变化：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21423.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21423.html

好，使用 CSS Houdini 自定义变量改造一下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21423.html

@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%;
    }
}
复制代码

看看改造后的效果：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21423.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21423.html

CodePode Demo -- conic-gradient 配合 CSS @property 实现饼图动画文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21423.html

以往使用纯 CSS 非常复杂才能实现的效果，如果可以轻松的达成，不得不感慨 CSS @property 强大的能力！文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21423.html

syntax 的 | 符号

顺便演示一下定义 Houdini 自定义变量时 syntax 的一些稍微复杂点的用法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21423.html

在 conic-gradient 中，我们可以使用百分比也可以使用角度作为关键字，上述的 DEMO 也可以改造成这样：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21423.html

@property --per {
  syntax: '<percentage> | <angle>';
  inherits: false;
  initial-value: 25%;
}
...
复制代码

表示，我们的自定义属性即可以是一个百分比值，也可以是一个角度值。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21423.html

除了 | 符号外，还有 + 和 # 号分别表示接受以空格分隔、和以逗号分隔的属性，感兴趣的可以自行尝试。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21423.html