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

使用 percentage 百分比类型或 angle 角度类型实现饼图悬停动画。

如果我们仍然使用传统的表示法并使用角度渐变来创建不同角度的饼图：

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

将会产生这种效果，因为圆锥渐变不支持过渡动画。你可以直接从一帧过渡到另一帧：

好吧，使用 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 演示 -- 用 CSS @Property 实现圆锥渐变图表动画

早期纯CSS实现的效果非常复杂。如果能轻松实现的话，不得不感叹CSS @property 能力强大！ |

语法符号

顺便说一句，我将在定义Houdini的自定义变量时展示稍微复杂一点的语法用法。

圆锥梯度我们可以使用百分比或角度作为关键字。上面的DEMO也可以转换成这样：

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

表示我们的自定义属性可以是A百分比值或者角度值。

除了符号|之外，还有符号+和#表示mas是接受的属性，以空格分隔。如果你有兴趣，可以自己尝试一下。

作者：chokcoco。