CSS3技巧32：CSS3制作经典进度条

最新推荐文章于 2024-06-05 18:34:39 发布

stones4zd

最新推荐文章于 2024-06-05 18:34:39 发布

阅读量1.7k

点赞数 2

分类专栏： HTML5_CSS3 文章标签： css3 前端 javascript

本文链接：https://blog.csdn.net/weixin_42703239/article/details/128744205

版权

HTML5_CSS3 专栏收录该内容

58 篇文章 14 订阅

订阅专栏

放假了，不想到处走亲戚。

窝在家里 coding 玩儿~

看到一个很不错的进度条效果，很简单，但是很好看，就写写练练手。

HTML 结构：

<!-- 进度条   -->
	<div class="jdt">
		<div class="jd_title">HTML</div>
		<!-- 进度 -->
		<div class="jdbar">
			<div class="jdper" per="50%" style="max-width: 50%; "></div>
		</div>
		<!-- 进度 end -->

		<div class="jd_title">CSS</div>
		<!-- 进度 -->
		<div class="jdbar">
			<div class="jdper" per="40%" style="max-width: 40%; "></div>
		</div>
		<!-- 进度 end -->

		<div class="jd_title">JavaScript</div>
		<!-- 进度 -->
		<div class="jdbar">
			<div class="jdper" per="60%" style="max-width: 60%; "></div>
		</div>
		<!-- 进度 end -->

	</div>
	<!-- 进度条   end -->

CSS：

.jdt {
	margin-left: 100px;
}

.jd_title {
	margin-top: 20px;
	margin-bottom: 20px;
}

.jdbar {
	background: rgb(227, 227, 227);
	height: 10px;
	width: 300px;
}

.jdper {
	height: 10px;
	background: #f30;
	max-width: 80%;
	width: 100%;
	position: relative;
	animation: aniBar 1s;
}

.jdper::before {
	position: absolute;
	content: attr(per);
	background: #f30;
	padding: 2px 5px;
	border-radius: 2px;
	font-size: 12px;
	right: 0;
	top: -30px;
	color: #fff;
	transform: translateX(50%);
}

.jdper::after {
	content: "";
	width: 10px;
	height: 10px;
	display: inline-block;
	background: #f30;
	position: absolute;
	right: 0;
	top: -18px;
	z-index: -1;
	border-radius: 2px;
	transform: translateX(50%) rotate(45deg);
}

@keyframes aniBar {
	0% {
		width: 0;
	}

	100% {
		width: 100%;
	}
}

用到的关键样式：

1. 绝对定位和相对定位：实现数字定位。

2. transform: translate( 百分比 ); 这是相对标签本身自己宽度的百分比，做位移。

3. 伪标签的 content:attr( ) 可以获取标签属性的内容作为伪标签的内容。