纯DIV+CSS实现进度条

来源：互联网发布：mac微信截图如何保存编辑：程序博客网时间：2024/05/17 07:58
效果图：
<html><head><meta charset="UTF-8"><title>进度条测试</title><style type="text/css">.progress {  overflow: hidden;  height: 20px;  margin-bottom: 20px;  margin-top: 20px;  margin-left: 30px;  background-color: #f7f7f7;  background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));  background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);  background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);  background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9);  background-repeat: repeat-x;  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);  -webkit-border-radius: 4px;  -moz-border-radius: 4px;  border-radius: 4px;  width:408px;  margin-right:12px;}.progress .bar {  width: 0%;  height: 100%;  color: #ffffff;  float: left;  font-size: 12px;  text-align: center;  align-items: center;  display: flex;  justify-content: center;  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);  background-color: #0e90d2;  background-image: -moz-linear-gradient(top, #149bdf, #0480be);  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));  background-image: -webkit-linear-gradient(top, #149bdf, #0480be);  background-image: -o-linear-gradient(top, #149bdf, #0480be);  background-image: linear-gradient(to bottom, #149bdf, #0480be);  background-repeat: repeat-x;  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0);  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);  -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;  -webkit-transition: width 0.6s ease;  -moz-transition: width 0.6s ease;  -o-transition: width 0.6s ease;  transition: width 0.6s ease;}</style></head><body style="margin:0 0 0 0;">    <div class="progress"><div class="bar" style="width: 60%;">60%</div>    </div></body></html>
阅读全文
0 0