html 条形进度条 互动,如何使用css3实现条形进度条效果

使用css3实现条形进度条效果原理

首先实用HTML构建所需的两个div，利用position：absolute使得两个div重合，根据要求区别不一样的颜色。

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

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

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

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

-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">

newdocument

.process-bar

{

width:100px;

display:inline-block;

*zoom:1;

}

.pb-wrapper

{

border:1pxsolid#cfd0d2;

position:relative;

background:#cfd0d2;

border-radius:8px;

}

.pb-container

{

height:12px;

position:relative;

left:-1px;

margin-right:-2px;

font:1px/0arial;

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/12pxarial;

color:black;

font:10px/12pxarial

}