我正在尝试使用图像创建自定义进度栏，但是我不确定从哪里开始

2024-05-16 • 问答

我的主要目标是在进度条的末尾有一个图像，以便当进度条移动时，图像也随之移动。

我使用了HTML中的标准进度条码，但是我对HTML并不精通，所以我不确定如何更改它以生成图像。

这是我主文件中的条形码。

<h3 id="progress2">Progress</h3>
<progress id="progress" value="<?php echo $total1 ?>" max="<?php echo $pracgoal ?>">
</progress>

total1和pracgoal都是变量，它们是当前值和柱线的最大值。下面是我在单独的sytlesheet中的CSS代码。

#Progress{
    width: 50%;
    background-color:#ddd;
    position:fixed;
    top:50px;
    left:110px;
}

当前，我只是获得标准的HTML进度栏。但是，我的目标是获得类似进度条的内容，但在进度条的末尾有兔子的照片，或者沿着进度条移动的沿线的东西。