javascript - 制作蓝色乐谱动画条

我有一个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>

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

谢谢

最佳答案

这基本上已经在这里了:

CSS Progress Circle

您可以轻松添加 CSS 动画，还可以使用 CSS content

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

关于javascript - 制作蓝色乐谱动画条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40714686/