制作蓝色得分动画吧

Question

我在HTML，CSS中有一个圈子评分项目（不知道他们的真名） 基本上，圆圈周围的蓝色条到达数字点。

我希望该栏在页面加载时作为动画转转。目前我使用PHP输出数字，但这意味着条形图没有动画。

请参阅图片

我认为可以这样做的一种简单方法是，如果PHP有任何内置函数来输出一个数字，例如输出3而不是1,2,3可以制作动画。

代码：

<div id="quad_rating_circle">
    <div class="c100 p<?php echo $score; ?> medium custom center dark fill">
        <span><?php echo $score;  ?></span>
        <div class="slice">
            <div class="bar"></div>
            <div class="fill"></div>
        </div>
    </div>
</div>

我花了一个小时，没有想出任何东西，非常感谢任何帮助。

谢谢

Answer 1

这基本上已经在这里了：

CSS Progress Circle

您可以轻松添加CSS动画，也可以使用CSS ACK

如下所示： https://css-tricks.com/animating-the-content-property/