网页进度条一种简单的实现方法

来源：懂视网责编：小采时间：2020-11-27 18:50:07

网页进度条一种简单的实现方法

网页进度条一种简单的实现方法:一个很简单的进度条用一个简单的css属性就能实现：cilpclip：rect(top,right,bottom,left )先写一个小程序来解释<style> .box { width: 200px; height: 20px; background:#ccc; border-radius:10px; posit

推荐度：

点击下载本文 文档为doc格式

导读网页进度条一种简单的实现方法:一个很简单的进度条用一个简单的css属性就能实现：cilpclip：rect(top,right,bottom,left )先写一个小程序来解释<style> .box { width: 200px; height: 20px; background:#ccc; border-radius:10px; posit

一个很简单的进度条

用一个简单的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>
<p class='box'>
 <span class='clip'></span>
</p>

显示效果：