CSS3 雷达搜索

H5火热以后，很多搜索效果简直亮瞎眼，最喜欢的就是雷达这一款的，本篇demo类似支付宝咻一咻效果。

效果图

上传不了动态图，好尴尬~~~

Paste_Image.png

HTML

CSS

html,body{ 
   width: 100%; 
   height: 100%; 
   background: #3d3938;  
}
.search{  
   padding-top: 30%;   
   width: 80%; 
   text-align: center;   
   box-sizing: border-box;
 }
#radar{ 
   position:relative;
}
#radar span { 
   position:absolute;
   width:70px; 
   height:70px; 
   border: 5px solid #fff;  
   box-shadow: 0 0 15px #fff; 
   border-radius:50%;  
   animation: play 2s infinite linear;  
   opacity: 0;
}
#radar span:nth-child(1) { 
   animation-delay: 0s;
}
#radar span:nth-child(2) {   
   animation-delay: 0.6s;
}
#radar span:nth-child(3) { 
   animation-delay: 1.3s;
}
@keyframes play { 
    0% {transform: scale(0); opacity: 0;}  
   25% {transform: scale(0); opacity: 0.5;}    
   50% {transform: scale(1); opacity: 1;}  
   75% {transform: scale(1.5); opacity: 0.5;}  
  100% {transform: scale(2); opacity: 0;}
}