纯DIV+CSS实现进度条

最新推荐文章于 2024-04-03 22:15:49 发布

清风掠影_XQ

最新推荐文章于 2024-04-03 22:15:49 发布

阅读量8.2k

点赞数

分类专栏： Css 文章标签：纯DIV+CSS实现进度条

本文链接：https://blog.csdn.net/xqq580231/article/details/78092440

版权

Css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

效果图：

<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>

清风掠影_XQ

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
纯DIV+CSS实现进度条

效果图：进度条测试 .progress { overflow: hidden; height: 20px; margin-bottom: 20px; margin-top: 20px; margin-left: 30px; background-color: #f7f7f7; background-image: -moz-linea
复制链接

扫一扫