纯CSS实现手机信号样式的进度条

最新推荐文章于 2024-01-14 13:23:00 发布

帝尊菜鸟

最新推荐文章于 2024-01-14 13:23:00 发布

阅读量3.2k

点赞数 3

分类专栏： CSS 文章标签： CSS个性化进度条纯CSS进度条纯CSS实现手机信号样式 css

本文链接：https://blog.csdn.net/dizuncainiao/article/details/78095098

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

上一篇的个性化进度条只是利用透明图片，加上背景填充这样简单的实现，有点简单粗暴，缺点就是需要很精细的调整定位，图片较大还影响加载性能

。接下来这一篇是纯CSS实现的类似手机信号样式的进度条，较之前更加高大上、炫酷，更小

（几行css代码不到1k）.

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<style>
		*{margin: 0; padding: 0; list-style: none;}
		.box{width: 300px; height: 300px; margin: 200px auto;}
		ul{position: relative; width: 200px; height: 200px;}
		li{width: 5px; position: absolute; bottom: 0; border-radius: 10px; background: rgba(0,0,0,.5);}
		ul li:nth-child(1){height: 10px; left: 0px;}
		ul li:nth-child(2){height: 15px; left: 10px;}
		ul li:nth-child(3){height: 20px; left: 20px;}
		ul li:nth-child(4){height: 25px; left: 30px;}
		ul li:nth-child(5){height: 30px; left: 40px;}
		ul li:nth-child(6){height: 35px; left: 50px;}
	</style>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
	<div class="box">
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
	<script type="text/javascript">
		setInterval(function(){
			var n = Math.random()*100;
			console.log(n);
			$('li').css('background-color','rgba(0,0,0,.5)');
			if(n<16){
				$('ul li:lt(1)').css('background','limegreen');
			}else if(16<n&&n<32){
				$('ul li:lt(2)').css('background','limegreen');
			}else if(32<n&&n<48){
				$('ul li:lt(3)').css('background','limegreen');
			}else if(48<n&&n<64){
				$('ul li:lt(4)').css('background','limegreen');
			}else if(64<n&&n<80){
				$('ul li:lt(5)').css('background','limegreen');
			}else{
				$('ul li').css('background','limegreen');
			}
		},1000)
	</script>
</body>
</html>

实现原理也是很简单的，先利用定位将6个小块放好，默认底色是黑色.5透明，再用js取个随机数判断下范围就可以实现手机信号忽上忽下的效果啦（效果图如下，大家可以直接复制代码即可看效果了，上一篇的图片地址好像改了）