CSS3制作一个简单的进度条

这里只是一个小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制作一个简单的进度条相关推荐

Linux中实现一个简单的进度条
说起进度条,其实大家常常见到,比如说你在下载视频或文件的时候,提示你当前下载进度的就是我们今天要说的进度条,进度条的模拟实现是挺简单的,但是要做的比较实用还是需要注意很多地方的,下来我就一步步的深入分 ...
用html和css制作一个简单的导航条
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>导 ...
使用CSS3制作一个简单的商品列表、浮动布局
代码如下: <style>*{margin: 0px;padding: 0px;list-style: none;}.box{width: 1365px;height: 490px;bor ...
JS简单实现进度条效果
今天我们来学习一下,用JS来实现简单的进度条效果首先我们先来到HTML部分 <div class="box1"></div> css部分 .box1{wi ...
用css3简单实现进度条
2019独角兽企业重金招聘Python工程师标准>>> css3是一个神奇的东西,刚才一时手痒,写了一个很简单的进度条不用js: 直接嵌套一个div,然后设置里面的div用anima ...
【web前端特效源码】使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT编程
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTY ...
【web前端特效源码】使用HTML5+CSS3制作一个会动的不规则斑点边框半径动画的动画效果~~适合初学者~超简单~ |前端开发
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的不规则斑点边框半径动画的动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCT ...
【web前端特效源码】使用HTML5+CSS3制作一个会动的电脑桌面+昼夜变化动画效果~~适合初学者~超简单~ |前端开发
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的电脑桌面+昼夜变化动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYPE ...
【web前端特效源码】使用HTML5+CSS3制作一个会促销广告滚动字幕3D动画效果~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会促销广告滚动字幕3D动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYPE ...

CSS3制作一个简单的进度条

CSS3制作一个简单的进度条相关推荐

最新文章

热门文章