小编给大家分享一下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;
animation: run1 4s linear infinite;
}
@keyframes run1 {
0% {
border-color: #ccc;
}
25% {
border-color: #ccc;
}
50% {
border-color: #ccc;
}
75% {
border-color: #ccc;
}
100% {
border-color: #97a8e6;
}
}
.second {
width: 200px;
height: 200px;
top: 60px;
left: 60px;
animation: run2 4s linear infinite;
}
@keyframes run2 {
0% {
border-color: #ccc;
}
25% {
border-color: #ccc;
}
50% {
border-color: #ccc;
}
75% {
border-color: #97a8e6;
}
100% {
border-color: #ccc;
}
}
.third {
width: 140px;
height: 140px;
top: 120px;
left: 120px;
animation: run3 4s linear infinite;
}
@keyframes run3 {
0% {
border-color: #ccc;
}
25% {
border-color: #ccc;
}
50% {
border-color: #97a8e6;
}
75% {
border-color: #ccc;
}
100% {
border-color: #ccc;
}
}
.fourth {
width: 20px;
height: 20px;
background: #ccc;
top: 180px;
left: 180px;
animation: run4 4s linear infinite;
}
@keyframes run4 {
0% {
background: #ccc;
border-color: #ccc;
}
25% {
background: #97a8e6;
border-color: #97a8e6;
}
50% {
background: #ccc;
border-color: #ccc;
}
75% {
background: #ccc;
border-color: #ccc;
}
100% {
background: #ccc;
border-color: #ccc;
}
}
