CSS3圆圈动画放大缩小循环动画效果

《CSS3圆圈动画放大缩小循环动画效果》正文开始，本次阅读大概6分钟。

今天在写一个zblog主题的时候，在无限下拉加载等待时间内，需要加一个动画循环效果，如上图！

1、简单放大缩小循环！

!DOCTYPEhtml
html
head
metahttp-equiv=Content-Typecontent=text/html;charset=utf-8/
titleCSS3圆圈动画放大缩小循环动画效果/title
style
.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;
}
}
/style
/head
body
divclass=dot/div
/body
/html

2、原地放大缩小，通过CSS进行调整！

!DOCTYPEhtml
html
head
metahttp-equiv=Content-Typecontent=text/html;charset=utf-8/
titleCSS3圆圈动画放大缩小循环动原地放大缩小/title
style
*{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;}
}
/style
/head
body
divclass=pagebar
divclass=dot/div
/div
/body
/html