html 条形进度条 互动,怎么使用css3实现条形进度条效果

怎么使用css3实现条形进度条效果

发布时间：2020-09-14 11:54:49

来源：亿速云

阅读：82

作者：小新

这篇文章给大家分享的是有关怎么使用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%

效果如图所示

感谢各位的阅读！关于怎么使用css3实现条形进度条效果就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！