今天在写一个zblog主题的时候，在无限下拉加载等待时间内，需要加一个动画循环效果，如上图！
1、简单放大缩小循环！
<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>CSS3圆圈动画放大缩小循环动画效果</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: ipple;/*动画属性名，也就是大家前面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-Type"content="text/html;charset=utf-8"/><title>CSS3圆圈动画放大缩小循环动原地放大缩小</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: ipple;/*动画属性名，也就是大家前面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>
