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

时间:2019-11-06 15:10:20

标签: php html css progress-bar

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

我使用了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进度栏。但是,我的目标是获得类似进度条的内容,但在进度条的末尾有兔子的照片,或者沿着进度条移动的沿线的东西。

0 个答案:

没有答案