CSS3评分分段进度条特效代码下载


CSS3评分分段进度条特效代码下载
CSS3评分分段进度条特效代码下载以及评分分段、进度条等js/jquery网页特效代码下载。

1. 引入CSS

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css'>
<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script  src="js/script.js"></script>

3. HTML代码

<div class="reviews-container">
	<h2>Reviews</h2>
	<div class="review">
		<span class="icon-container">5 <i class="fas fa-star"></i></span>
		<div class="progress">
			<div class="progress-done" data-done="68"></div>
		</div>
		<span class="percent">68%</span>
	</div>
	<div class="review">
		<span class="icon-container">4 <i class="fas fa-star"></i></span>
		<div class="progress">
			<div class="progress-done" data-done="13"></div>
		</div>
		<span class="percent">13%</span>
	</div>
	<div class="review">
		<span class="icon-container">3 <i class="fas fa-star"></i></span>
		<div class="progress">
			<div class="progress-done" data-done="9"></div>
		</div>
		<span class="percent">9%</span>
	</div>
	<div class="review">
		<span class="icon-container">2 <i class="fas fa-star"></i></span>
		<div class="progress">
			<div class="progress-done" data-done="3"></div>
		</div>
		<span class="percent">3%</span>
	</div>
	<div class="review">
		<span class="icon-container">1 <i class="fas fa-star"></i></span>
		<div class="progress">
			<div class="progress-done" data-done="7"></div>
		</div>
		<span class="percent">7%</span>
	</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

相关推荐

发表评论

相关文章