html 条形进度条 互动,如何使用css3实现条形进度条效果（附完整代码）

在音乐和视频播放的时候，不止可以直接查看播放时间，也可以通过观察进度条来查看播放时间，观察进度条这种方法会更加直观的告诉用户还有多久结束，所以进度条是一种非常实用的特殊效果。本文在介绍如何使用css3实现进度条效果的基础上，重点探讨了其具体步骤，本文内容紧凑，希望大家可以有所收获。

使用css3实现条形进度条效果原理首先实用HTML构建所需的两个div，利用position：absolute使得两个div重合，根据要求区别不一样的颜色。

利用keyframe属性使得重合的进度条移动起来，再用animation进行动画控制，语法为@keyframes animationname {keyframes-selector {css-styles;}}

ps：如果有对以上知识不了解的小伙伴请查阅本站的相关文章。

如何使用css3实现图片的自动轮播特效(附完整代码)

使用css3实现条形进度条效果代码

new document

.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

}

50%

效果如图所示