H5火熱以后打肝，很多搜索效果簡直亮瞎眼，最喜歡的就是雷達(dá)這一款的刽宪，本篇demo類似支付寶咻一咻效果顿苇。
效果圖
上傳不了動態(tài)圖，好尷尬~~~
Paste_Image.png
HTML
<div class="search">
<div id="radar">
<span></span>
<span></span>
<span></span>
</div>
</div>
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;}
}
