css怎么居中，css中用tff，css动画菜鸟教程，css中label怎有对齐，css多张图片浏览代码，css图片加title属性吗，ie-css3.js
今天在写一个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:'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进行调整！
css怎么居中，css中用tff，css动画菜鸟教程，css中label怎有对齐，css多张图片浏览代码，css图片加title属性吗，ie-css3.js
<!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:'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>