当然,以下是一个简单的B站进度条的HTML代码:
<!DOCTYPE html>
<html>
<head>
<title>B站进度条</title>
<style>
#progress-bar {
width: 500px;
height: 20px;
background-color: #f2f2f2;
border-radius: 10px;
margin: 50px auto;
}
#progress {
width: 0%;
height: 100%;
background-color: #ff4d4f;
border-radius: 10px;
transition: width 0.3s ease-in-out;
}
</style>
</head>
<body>
<div id="progress-bar">
<div id="progress"></div>
</div>
<script>
// 模拟进度增加
var progress = 0;
var interval = setInterval(function() {
progress += 10;
document.getElementById("progress").style.width = progress + "%";
if (progress >= 100) {
clearInterval(interval);
}
}, 1000);
</script>
</body>
</html>
你可以将以上代码复制到一个HTML文件中,然后在浏览器中打开该文件,即可看到一个简单的B站进度条效果。进度条会在每秒钟递增10%,直到达到100%。你也可以根据自己的需求修改进度条的样式和动画效果。