css3实现wifi信号逐渐增强效果实例

整理文档，搜刮出一个css3实现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;
     }
 }
    


    
 
   
   
   
   
 
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。