纯css实现wifi信号图标及强弱/链接/加密状态

代码2017-12-284,093 人已阅来源：TONJAY-原创

分享一段自己写的纯css实现的wifi连接的各种状态代码，希望能帮助到一些学习的朋友。默认图标大小为20px，已经通过transform放大，具体的可以见详细代码及预览。

运行代码

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>纯css实现wifi信号图标及强弱/链接/加密状态 来源：tonjay.com 前端资源网</title>
</head>
<body>
<style>
.strength-ready{ color: #26a69a;}/*已链接或曾连接过的颜色及信号强弱*/
.strength-no{ color: #37474f;}/*未链接的颜色*/
.wifi-icon{ width: 20px; height:20px; display: inline-block; position: relative; overflow: hidden; margin: 0 auto; float: left }
.wifi-icon>span{ display: block; position: absolute; border-radius: 50%;}
.wifi-icon .wifi-1{ width: 5px; height: 5px; left: 50%; transform: translateX(-50%); bottom: 1px; background: currentcolor;}
.wifi-icon .wifi-2,.wifi-icon .wifi-3,.wifi-icon .wifi-4{ border: 2px solid; border-color: currentcolor transparent transparent;}
.wifi-icon .wifi-2{ width: 12px; height: 12px; left: 4px; bottom: -2px;}
.wifi-icon .wifi-3{ width: 20px; height: 20px; left: 0px; bottom: -6px;}
.wifi-icon .wifi-4{ width: 28px; height: 28px; left: -4px; bottom: -10px;}
.wifi-icon>span:after{content: ""; display: block; position: absolute;}
.wifi-icon .lock{ width: 6px; height: 5px; background: currentcolor; display: block; right: 0; bottom: 1px; border-radius: 0;}
.wifi-icon .lock:after{ width: 4px; height: 3px; border: 1px solid; border-radius: 100px 100px 0 0; border-bottom: none; left:1px; bottom: 100%;}
.wifi-icon .key{ width: 5px; height: 5px; box-shadow: 0 0 0 1px inset; display: block; right: 0; bottom: 1px; }
.wifi-icon .key:after{ width: 1px; height:1px; background: currentcolor; box-shadow: 0 -1px,0 -2px,0 -3px,0 -4px,1px -3px,2px -3px; bottom:4px; left:2px;}
.strength-1 .wifi-4,.strength-2 .wifi-4,.strength-2 .wifi-3,.strength-3 .wifi-4,.strength-3 .wifi-3,.strength-3 .wifi-2{ border-color: #b0bec5 transparent transparent;}
/*demo样式*/
.box{ width: 400px; margin: 0 auto;}.wifi-icon{transform: scale(4); margin: 40px; }
*,*::after,*::before{ box-sizing: border-box;}
</style>
<div class="box">
<span class="wifi-icon strength-ready">
	<span class="wifi-1"></span>
	<span class="wifi-2"></span>
	<span class="wifi-3"></span>
	<span class="wifi-4"></span>
	<span class="key"></span>
</span>
<span class="wifi-icon strength-ready strength-1">
	<span class="wifi-1"></span>
	<span class="wifi-2"></span>
	<span class="wifi-3"></span>
	<span class="wifi-4"></span>
	<span class="key"></span>
</span>
<span class="wifi-icon strength-ready strength-2">
	<span class="wifi-1"></span>
	<span class="wifi-2"></span>
	<span class="wifi-3"></span>
	<span class="wifi-4"></span>
	<span class="key"></span>
</span>
<span class="wifi-icon strength-ready strength-3">
	<span class="wifi-1"></span>
	<span class="wifi-2"></span>
	<span class="wifi-3"></span>
	<span class="wifi-4"></span>
	<span class="key"></span>
</span>
<span class="wifi-icon strength-no">
	<span class="wifi-1"></span>
	<span class="wifi-2"></span>
	<span class="wifi-3"></span>
	<span class="wifi-4"></span>
	<span class="lock"></span>
</span>
<span class="wifi-icon strength-no strength-1">
	<span class="wifi-1"></span>
	<span class="wifi-2"></span>
	<span class="wifi-3"></span>
	<span class="wifi-4"></span>
	<span class="lock"></span>
</span>
<span class="wifi-icon strength-no strength-2">
	<span class="wifi-1"></span>
	<span class="wifi-2"></span>
	<span class="wifi-3"></span>
	<span class="wifi-4"></span>
	<span class="lock"></span>
</span>
<span class="wifi-icon strength-no strength-3">
	<span class="wifi-1"></span>
	<span class="wifi-2"></span>
	<span class="wifi-3"></span>
	<span class="wifi-4"></span>
	<span class="lock"></span>
</span>
</div>
</body>
</html>

此文为Tonjay原创，转载保留相关信息。

AIHX

纯css实现wifi信号图标及强弱/链接/加密状态

相关内容