Html 仅为圆中的一个线性渐变色停止设置动画

我正在创建一些圆，其中圆的某一部分使用线性渐变填充颜色。我很好奇，是否有可能只对圆圈中的一个颜色停止点设置动画。例如，如果一个圆由0 30%的红色填充，其余30%的100%由灰色填充，是否可以仅在0 30%的红色部分上创建动画效果。因为这有点像一个进度条，所以我们希望它看起来像是圆圈被颜色填充一样。代码如下：

。页面包装器{
最大宽度：800px；
显示器：flex；
flex-directon：行；
}
* {
-webkit框大小：边框框；
-moz框大小：边框框；
-ms框尺寸：边框框；
框大小：边框框；
}
身体{
背景：#fff；
颜色：#001A5F；
}
.圆形包装{
最大宽度：200px；
利润率：40像素；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}
.圆圈{
宽度：150px；
高度：150像素；
左边距：0；
边框：4px实心#a0c884；
边界半径：100%；
文本对齐：居中；
颜色：#001A5F；
背景色：#a0c884；
/*文本阴影：0px0px30pxrgba（119,119,119,0.7）*/
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit对齐项目：居中；
-moz对齐项目：居中；
-ms对齐项目：居中；
对齐项目：居中；
}
.圈出文本{
字体大小：45px；
/*字母间距：4px*/
字体系列：“蒙特塞拉特”、“Helvetica Neue”、Helvetica、Arial、无衬线字体；
字号：700；
保证金：0；
宽度：100%；
}
.circle-text2{
颜色：#fff；
字体大小：100px；
}
h3{
边缘顶部：10px；
边缘底部：10px；
字体大小：25px；
}
p{
保证金：0；
}
/*如图所示，单击不起作用*/
.举例{
背景：线性渐变（至顶部，
#253715 0%50%，50%100%；
}
.例2{
背景：线性渐变（至顶部，
#ce2029 0%30%，#ececec 30%100%）；
}
.例3{
背景：线性渐变（至顶部，
紫色0%90%，#fff 90%100%）；
}
.圆边{
边框：4px实心#e14048；
}
.圆形边界2{
边框：4px实心#e14048；
}
.圆形边界2{
边框：4px实心#cd00cd；
}

50%
1960级
筹得：500美元

目标：1000美元
30%
1965届
筹得：300美元

目标：1000美元
90%
肝癌
筹得：900美元

目标：1000美元

您可以使用@keyframes动画，并通过将百分比除以要获取在@keyframes规则中使用的增量值的步数来分解百分比

因此，在您的30%示例中，您将为CSS类

创建一个动画。我选择以5为增量使用百分比，因此100除以5得到20步。现在我们用30除以20，得到1.5。这是我们希望在@keyframes规则中增加每个5%增量的量

我们开始添加动画并为其命名关键帧。在我使用
fill
的示例中，我添加了一个持续时间
0.7
秒，并添加了一个
轻松输入输出
<代码>动画：填充0.7s轻松输入输出

然后，我们还添加了最后一个关键帧样式，以便在动画停止时显示预期结果，填充30%

。示例{
动画：填充0.7s缓进缓出；
背景：线性梯度（至顶部，#ce2029 0%30%，#ececec 30%100%）；
}

然后我们创建@keyframes规则
@keyframes用我们在elements类中使用的动画名称填充
。示例

。在这里，我们每一步将

线性梯度增加1.5%

0%{
背景：线性梯度（至顶部，#ce2029 0%0%，#ececec 0%100%）；
}
5% {
背景：线性梯度（至顶部，#ce2029 0%1.5%，#ECECC 1.5%100%）；
}
10% {
背景：线性梯度（至顶部，#ce2029 0%3%，#ececec 3%100%）；
}
/*在@keyframes规则中增加5%，并向两个渐变添加1.5%
每次设置直到达到100%关键帧=>30%渐变填充*/


.circle包装器{
最大宽度：200px；
利润率：40像素；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}
.圆圈{
宽度：150px；
高度：150像素；
左边距：0；
边框：4px实心#a0c884；
边界半径：100%；
文本对齐：居中；
颜色：#001A5F；
背景色：#a0c884；
/*文本阴影：0px0px30pxrgba（119,119,119,0.7）*/
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit对齐项目：居中；
-moz对齐项目：居中；
-ms对齐项目：居中；
对齐项目：居中；
}
.圈出文本{
字体大小：45px；
/*字母间距：4px*/
字体系列：“蒙特塞拉特”、“Helvetica Neue”、Helvetica、Arial、无衬线字体；
字号：700；
保证金：0；
宽度：100%；
}
h3{
边缘顶部：10px；
边缘底部：10px；
字体大小：25px；
}
p{
保证金：0；
}
/*如图所示，单击不起作用*/
.举例{
动画：填充0.7s缓进缓出；
背景：线性梯度（至顶部，#ce2029 0%30%，#ececec 30%100%）；
}
@关键帧填充{
0% {
背景：线性梯度（至顶部，#ce2029 0%0%，#ececec 0%100%）；
}
5% {
背景：线性梯度（至顶部，#ce2029 0%1.5%，#ECECC 1.5%100%）；
}
10% {
背景：线性梯度（至顶部，#ce2029 0%3%，#ececec 3%100%）；
}
15% {
背景：线性梯度（至顶部，#ce2029 0%4.5%，#ECECC 4.5%100%）；
}
20% {
背景：线性梯度（至顶部，#ce2029 0%6%，#ececec 6%100%）；
}
25% {
背景：线性梯度（至顶部，#ce2029 0%7.5%，#ececec 7.5%100