使用CSS3制作一个简单的进度条(demo)

时间：2021-05-08

这里只是一个小demo,一个用CSS3写的进度条。

如图所示：

具体代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title> new document </title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1"><style>.process-bar{ width:100px; display:inline-block; *zoom:1;}.pb-wrapper{ border:1px solid #cfd0d2; position:relative; background:#cfd0d2; border-radius: 8px;}.pb-container{ height:12px; position:relative; left:-1px; margin-right:-2px; font:1px/0 arial; padding:1px;}.pb-highlight{ position:absolute; left:0; top:0; _top:1px; width:100%; opacity:0.6; filter:alpha(opacity=60); height:6px; background:white; font-size:1px; line-height:0; z-index:1}.pb-text{ width:100%; position:absolute; left:0; top:0; text-align:center; font:10px/12px arial; color:black; font:10px/12px arial}</style></head><body> <div class="process-bar skin-green"> <div class="pb-wrapper"> <div class="pb-highlight"></div> <div class="pb-container"> <div class="pb-text">50%</div> <div class="pb-value" style="height: 100%;width: 50%;background: #19d73d;border-radius: 8px;"></div> </div> </div> </div></body></html>

以上所述是小编给大家介绍的使用CSS3制作一个简单的进度条(demo)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章