网页进度条一种简单的实现
2017-09-22 21:23
197 查看
一个很简单的进度条
用一个简单的css属性就能实现:cilp
clip:rect(top,right,bottom,left)
先写一个小程序来解释
<style>
.box {
width: 200px;
height: 20px;
background:#ccc;
border-radius:10px;
position:relative
}
.clip {
position: absolute;
width: 100%;
height: 100%;
clip: rect(0px,100px,20px,0px);
background: red;
border-radius:10px;
}
</style>
<div class='box'>
<span class='clip'></span>
</div>
显示效果:
给.clip加上position:absolute;width:100%;height:100%;相对于在box里加上一个一样宽高的盒子,背景为红色;
rect(top,right,bottom,left),相对于控制这个盒子显示的面积,通过改变距离right的值,使显示的面积变大
用一个简单的css属性就能实现:cilp
clip:rect(top,right,bottom,left)
先写一个小程序来解释
<style>
.box {
width: 200px;
height: 20px;
background:#ccc;
border-radius:10px;
position:relative
}
.clip {
position: absolute;
width: 100%;
height: 100%;
clip: rect(0px,100px,20px,0px);
background: red;
border-radius:10px;
}
</style>
<div class='box'>
<span class='clip'></span>
</div>
显示效果:
给.clip加上position:absolute;width:100%;height:100%;相对于在box里加上一个一样宽高的盒子,背景为红色;
rect(top,right,bottom,left),相对于控制这个盒子显示的面积,通过改变距离right的值,使显示的面积变大
相关文章推荐
- 如何简单实现网页水平自动居中?
- HTML5 CSS3 诱人的实例 : 网页加载进度条的实现,下载进度条等
- c简单实现爬取网页
- malloc函数的一种简单的原理性实现
- SpringBank 开发日志 一种简单的拦截器设计实现
- 简单实现网页另存为word或者excel
- 一种简单的实现hls流量统计的方法
- 用简单的css实现html网页动态电子相册的功能
- Android UI控件之ProgressBar进度条简单实现
- Android一键换肤功能:一种简单的实现
- 在网页上生成由字母和数字组成验证码的简单实现
- 实现简单的网页拖拽效果
- js网页版计算器的简单实现
- 一种网页倒计时的实现
- Windows Python IDEL编译器自动忽略'\r'及简单进度条的实现
- Java实现简单网页抓取
- JAVA抓取网页的简单实现
- javascropt实现简单的进度条
- Linux检测TCP连接断开的一种简单实现方法
- PHP实现简单爬虫-抓取网页url