CSS3 “搜索中...”“检测中...”效果

最近做一个系统检测的功能，里面有一个检测中的效果，觉得挺好玩的，也可以用了当loading中或者水波一圈一圈逐渐变大的效果，都可以的。。。不多说了，效果贴图。。。



可能gif图动画不是特别流畅，实际效果还是不错的。。。不磨磨唧唧的，贴代码：

html代码：

<div class="detecting_center">
<div class="circle">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="letter">
<div>系</div>
<div>统</div>
<div>检</div>
<div>测</div>
<div>中</div>
</div>
</div>

起初“系统检测中”这几个字是打算做个类似打字机的效果的，所以才这么布局的。。这里不说文字效果。。。只说白色背景一圈一圈放大的效果。。

css代码：

.detecting_center {
position: relative;
width: 210px;
height: 210px;
margin: 60px auto;}

.circle div {
background-color: #fff;
border-radius: 100%;
position: absolute;
left: 50%;
top: 50%;
opacity: 0;
width: 100%;
height: 100%;
margin: -50% 0 0 -50%;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation: circle 2s 0s linear infinite;
animation: circle 2s 0s linear infinite;
z-index: 1;
}

.circle div:nth-child(1) {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}

.circle div:nth-child(2) {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}

.circle div:nth-child(3) {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}

.circle > div:nth-child(4) {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}

css3动画效果

@-webkit-keyframes circle{
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0.4;
}
50% {
-webkit-transform: scale(1.35);
transform: scale(1.35);
opacity: 0;
}
}

关于动画这块儿有个小小的问题，如果0%时，opacity:0时，动画也可正常执行，只是会有一段时间的延迟，即当点开页面后，动画会顿一会儿，然后再开始执行，如果你不想延迟，就按照上面代码；想延迟就按这行所说，就哦啦！！！

之后会补一下项目地址哦 ～