制作蓝色乐谱动画条

Posted 2023-02-24

【中文标题】制作蓝色乐谱动画条

【英文标题】：Making a blue score animated bar

【发布时间】：2017-04-04 12:35:06

【问题描述】：

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

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

谢谢

【问题讨论】：

你能给我们展示一下得分指示器的渲染 HTML 和 CSS 吗？

尝试css动画。

我假设您正在尝试加载一些 js 或 css 文件，并且在每个文件加载时您都希望增加进度。

【参考方案1】：

这基本上已经在这里了：

CSS Progress Circle

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

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