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

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

运行代码

纯css实现wifi信号图标及强弱/链接/加密状态 来源：tonjay.com 前端资源网

.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;}

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