1、wifi信号实现
<div class="box">
<div class="wifi-symbol">
<div class="wifi-circle first"></div>
<div class="wifi-circle second"></div>
<div class="wifi-circle third"></div>
<div class="wifi-circle fourth"></div>
</div>
</div>
css 样式
.box {
position: relative;
width: 240px;
height: 240px;
}
.wifi-symbol {
width: 100%;
height: 100%;
box-sizing: border-box;
overflow: hidden;
transform: rotate(45deg);
position: absolute;
top: -30%;
}
.wifi-circle {
border: 20px solid #ccc;// 根据box高度宽度设置 border宽度,根据几个信号改变border颜色
border-radius: 50%;
position: absolute;
}
.first {
width: 140%;
height: 140%;
top: 30%;
left: 30%;
}
.second {
width: 100%;
height: 100%;
top: 50%;
left: 50%;
}
.third {
width: 60%;
height: 60%;
top: 70%;
left: 70%;
}
.fourth {
width: 15%;
height: 15%;
top: 90%;
left: 90%;
}
2、gprs信号
<ul class="gprs">
<li
style="height: 0.4rem"
class="bg-gray"
></li>
<li
style="height: 0.7rem"
class="bg-gray"
></li>
<li
style="height: 1rem"
class="bg-gray"
></li>
<li
style="height: 1.3rem"
class="bg-gray"
></li>
</ul>
css样式
.gprs {
height: 1.5rem;
width: 2rem;
line-height: 1.5rem;
display: flex;
align-items: end;
margin: 0;
list-style: none;
}
.gprs > li {
width: 4px;
margin-left: 0.2rem;
border-radius: 5px;
}
.bg-gray {
background-color: #8799a3;
}
.bg-green {
background-color: #39b54a;
}