整理文档,搜刮出一个css3实现wifi信号逐渐增强效果实例的代码,稍微整理精简一下做下分享。
效果图
下面是实现代码:
wifi信号*{
margin: 0;
padding: 0;
}
.box {
width: 240px;
height: 240px;
box-sizing: border-box;
position: relative;
margin: 100px auto;
}
.wifi-symbol {
width: 200px;
height: 200px;
margin-left: 18px;
box-sizing: border-box;
overflow: hidden;
transform: rotate(45deg);
}
.wifi-circle {
border: 10px solid #ccc;
border-radius: 50%;
position: absolute;
}
.first {
width: 260px;
height: 260px;
top: 0;
left: 0;</