案例进度条

最新推荐文章于 2019-07-17 23:32:00 发布

qq_38068491

最新推荐文章于 2019-07-17 23:32:00 发布

阅读量190

点赞数

本文链接：https://blog.csdn.net/qq_38068491/article/details/83038149

版权

本文详细介绍了如何使用CSS技术来创建具有视觉吸引力的案例进度条效果，涵盖了关键样式属性的设置，如宽度、背景颜色、过渡效果等，帮助读者理解并实现自定义的进度条组件。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>进度条 </title>	
	</head>
	<style>
		#progress{
			position: relative;
			margin: auto;
			top: 200px;
			display: block;
			width: 200px;
			height: 20px;
			border-style: dotted;
			border-width: thin;
			border-color: darkgreen;
		}
		#filldiv{
			position:absolute;
			top: 0px;
			left: 0px;
			width: 0px;
			height: 20px;
			background: blue;
		}
		#percent{
			position: absolute;
			top: 0px;
			left: 200px;
			
		}
	</style>

	
	<body>
		<div id="progress">
			<div id="filldiv"></div>
			<span id="percent">0</span>
		</div>
	</body>
</html>
<script src="public.js"></script>
 <script type="text/javascript">
 var t