使用CSS3制作一个简单的进度条(demo)
发布时间:2017-05-23 16:30:26 作者:佚名 我要评论
这篇文章主要介绍了使用CSS3制作一个简单的进度条(demo)的相关资料,需要的朋友可以参考下
这里只是一个小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),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
- 这篇文章主要给大家介绍了利用CSS3实现进度条的两种姿势,文中给出了详细的示例代码和图文介绍,对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。2017-03-21
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
本篇文章主要介绍了HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例,具有一定的参考价值,有兴趣的可以了解一下。2016-12-30- 用CSS3的border-radius、box-shadow、transition、-moz-linear-gradient、-webkit-gradient等样式就可以完成一个时尚进度条,这里我们来看几个CSS3制作彩色进度条样式的代码2016-06-23
- 圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实2016-05-26
- 下面小编就为大家分享一篇html5+css3进度条倒计时动画特效代码【推荐】。希望对大家有所帮助。一起跟随小编过来看看吧2016-03-08
- 这篇文章主要介绍了可以随进度显示不同颜色的css3进度条,文章最后有下载地址,需要的朋友可以参考下2014-04-11
- 原理是通过大量的css3属性来实现的,如:animation、transform、keyframes等等属性,示例采用了结构性伪类选择符E:nth-child(n),来进行对HTML元素的选择以及控制输出,感2013-08-19
- 进度条而且还是带有闪亮,不可思议吧,看下效果图,至于实现代码,感兴趣的前端设计者可以参考下哈,或许有所意想不到的收获2013-04-17
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
加载动画和进度条的真正目的是让用户了解任务的进度,有很多的基于JavaScript的动画,但我决定切换到CSS3,使用纯CSS:没有flash,没有图像,没有脚本2013-01-07- 今天就为大家分享一个利用css3制作动态进度条以及附加jQuery百分比数字显示,其效果对比flash来说却毫不逊色,有一个精致的动画进度条,上面还有当前进度的百分比数字显示,2012-12-13
最新评论