今天在写一个zblog主题的时候，在无限下拉加载等待时间内，需要加一个动画循环效果，如上图！
1、简单放大缩小循环！html>
CSS3圆圈动画放大缩小循环动画效果
.dot{
margin:150pxauto;
width:200px;
height:200px;
background-color:#6190e8;
border-radius:50%;
/*box-shadow:0010pxrgba(0,0,0,.3)inset;*/
-webkit-animation-name:'ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/
-webkit-animation-duration:.5s;/*动画持续时间*/
-webkit-animation-timing-function:ease;/*动画频率，和transition-timing-function是一样的*/
-webkit-animation-delay:0s;/*动画延迟时间*/
-webkit-animation-iteration-count:infinite;/*定义循环资料，infinite为无限次*/
-webkit-animation-direction:alternate;/*定义动画方式*/
}
@keyframesripple{
0%{
/*opacity:0.35;*/
width:190px;
height:190px;
}
100%{
/*opacity:0.2;*/
width:250px;
height:250px;
}
}
2、原地放大缩小，通过CSS进行调整！
html>
CSS3圆圈动画放大缩小循环动原地放大缩小
*{padding:0;margin:0;}
.pagebar{margin:0auto;width:30px;}
.page2{}
.dot{
margin:0auto;
width:30px;
height:30px;
background-color:#6190e8;
border-radius:50%;
/*box-shadow:0010pxrgba(0,0,0,.3)inset;*/
-webkit-animation-name:'ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/
-webkit-animation-duration:.5s;/*动画持续时间*/
-webkit-animation-timing-function:ease;/*动画频率，和transition-timing-function是一样的*/
-webkit-animation-delay:0s;/*动画延迟时间*/
-webkit-animation-iteration-count:infinite;/*定义循环资料，infinite为无限次*/
-webkit-animation-direction:alternate;/*定义动画方式*/
}
@keyframesripple{
0%{margin-left:15px;margin-top:15px;width:0;height:0;}
100%{margin-left:0;margin-top:0;width:30px;height:30px;}
}
