本文由 DTcms素材网 – DT素材网 发布，转载请注明出处，如有问题请联系我们！如何使用css3实现条形进度条效果（附完整代码）
收藏 在音乐和视频播放的时候，不止可以直接查看播放时间，也可以通过观察进度条来查看播放时间，观察进度条这种方法会更加直观的告诉用户还有多久结束，所以进度条是一种非常实用的特殊效果。本文在介绍如何使用css3实现进度条效果的基础上，重点探讨了其具体步骤，本文内容紧凑，希望大家可以有所收获。
使用css3实现条形进度条效果原理
-
首先实用HTML构建所需的两个div，利用position：absolute使得两个div重合，根据要求区别不一样的颜色。
-
利用keyframe属性使得重合的进度条移动起来，再用animation进行动画控制，语法为@keyframes animationname {keyframes-selector {css-styles;}}
ps：如果有对以上知识不了解的小伙伴请查阅本站的相关文章。
使用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>
效果如图所示
