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