分享一段自己写的纯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 .wif