实现圆点加载效果如图：1：CSS3动画实现代码html代码：提交订单...css代码：.ani_dot{字体系列：simsun；}:root.ani_dot{/*这里使用hack是因为在IE6~IE8浏览器下，vertical-align解析不规范，值会变成bottom或者其他按钮的实际高度*/display:inline-block;宽度：1.5em；垂直对齐：底部；溢出：隐藏；}@-webkit-keyframes点{0%{宽度：0；右边距：1.5em；}33%{宽度：.5em;右边距：1em；}66%{宽度：1em；右边距：.5em；}100%{宽度：1.5em;margin-right:0;}}.ani_dot{-webkit-animation:dot3sinfinitestep-start;}@keyframesdot{0%{width:0;右边距：1.5em；}33%{宽度：.5em;右边距：1em；}66%{宽度：1em；右边距：.5em；}100%{宽度：1.5em;margin-right:0;}}.ani_dot{animation:dot3sinfinitestep-start;}就会出现如图的结果。注意事项：1、IE10+等浏览器，点点动画消失，IE6-IE9为普通点点点文字。2.animate动画是连续的，不过我们这里是逐帧的，一张一张的，不是那么连续的效果，用step-start。3.以上代码还使用了css3选择器：root。:root是IE9+等现代浏览器的Hack，在IE6-7甚至IE8下，vertical-align:bottom解析inline-block水平元素与inlinelevel不一样，会导致高度被拉长。因此，显示：inline-块需要被破解。二：动画参数详解由于上面使用了animation动画，这里详细介绍一下这个动画的参数。简介CSS动画（Animations）简单的说就是在固定的动画时间内，以一定的频率偷偷改变其CSS的一个或多个值，从而达到视觉上的过渡动画效果。可以控制动画的很多方面，包括动画运行时间、开始值和结束值，以及动画暂停和延迟其开始时间等。语法=||<时间>||<单动画计时功能>||<时间>||<单次动画迭代次数>||<单动画方向>||<单动画填充模式>||<'animation-name'>：检索或设置动画的名称<'animation-duration'应用于对象>：检索或设置对象动画的持续时间<'animation-timing-function'>：检索或设置对象动画的过渡类型<'animation-delay'>：检索或设置对象动画延迟的时间<'animation-iteration-count'>：检索或设置对象动画的次数cyclesofobjectanimation<'animation-direction'>:检索或设置对象动画是否在循环中向相反方向移动<'animation-fill-mode'>:检索或设置对象动画时间<'animation-的状态play-state'>：检索或设置对象动画的状态。w3c正在考虑是否去掉这个属性，因为动画的状态可以通过其他方式实现，比如重置除animation-play-state属性之外的所有动画属性的shorthand属性。animation-name指定@keyframes动画的名称。它是动画的名称，后跟@keyframes。这个demo在本文中称为dot，意思是“点”。animation-duration指定动画完成一个周期所需的秒数或毫秒数。默认为0。animation-timing-function指定动画的速度曲线。默认值为“轻松”。常用动画速度参数：linear：线性过渡。相当于贝塞尔曲线(0.0,0.0,1.0,1.0)ease：平滑过渡。相当于贝塞尔曲线(0.25,0.1,0.25,1.0)ease-in：由慢到快。相当于贝塞尔曲线(0.42,0,1.0,1.0)ease-out：由快到慢。相当于贝塞尔曲线(0,0,0.58,1.0)ease-in-out：由慢到快再到慢。相当于贝塞尔曲线(0.42,0,0.58,1.0)step-start:相当于steps(1,start)step-end:相当于steps(1,end)steps([,[start|end]]?):一个接受两个参数的阶跃函数。第一个参数必须是正整数，指定函数的步数。第二个参数的值可以是start或end，指定每一步值变化的时间点。第二个参数是可选的，默认为结束。cubic-bezier(,,,)：具体贝塞尔曲线类型，4个值需要在区间[0,1]内animation-delay指定动画何时开始。默认为0。也就是说，它指的是动画延迟执行时间。animation-iteration-count指定动画播放的次数。默认是1次，当然我们可以设置2次，3次，然后递归。还有一个无线循环关键字infinite，就是动画反复播放。animation-direction指定动画是否在下一个循环中反向播放。默认值为“正常”。当然还有以下几种取值：reverse：反方向运行alternate：动画正常运行后反方向运行，交替继续运行alternate-reverse：动画先反方向运行再反方向运行向前方向，并继续交替运行animation-fill-mode指定对象在动画时间之外的状态。无：默认值。不设置对象动画的状态向前：将对象的状态设置为动画结束时的状态向后：将对象的状态设置为动画开始时的状态both：设置对象的状态反对动画结束或开始的状态，以及动画开始前的“from”或“0%”关键帧；动画完成后，是“到”或“100%”关键帧状态。animation-play-state指定动画是运行还是暂停。默认值为“正在运行”。还有一个值paused：暂停。三：动画动画实例实例一使用fromto：div{width:100px;高度：100px；背景：红色；职位：相对；动画：mymove5s无限；-moz-动画：mymove5s无限；/*Firefox*/-webkit-animation:mymove5sinfinite;/*Safari和Chrome*/}@keyframesmymove{从{left:0px;}到{left:200px;}}@-moz-keyframesmymove{/*Firefox*/从{left:0px;}到{left:200px;}}@-webkit-keyframesmymove{/*Safari和Chrome*/从{left:0px;}到{left:200px;}}实例二使用百分比：@keyframesmyfirst{0%{background:red;左：0px；top:0px;}25%{背景:黄色;左：200px；top:0px;}50%{背景:蓝色;左：200px；顶部：200像素；}75%{背景：绿色；左：0px；顶部：200像素；}100%{背景：红色；左：0px；top:0px;}}@-moz-keyframesmyfirst{/*Firefox*/0%{background:red;左：0px；top:0px;}25%{背景:黄色;左：200px；top:0px;}50%{背景:蓝色;左：200px；top:200px;}75%{背景:g重新;左：0px；顶部：200像素；}100%{背景：红色；左：0px；top:0px;}}@-webkit-keyframesmyfirst{/*Safari和Chrome*/0%{background:red;左：0px；top:0px;}25%{背景:黄色;左：200px；top:0px;}50%{背景:蓝色;左：200px；顶部：200像素；}75%{背景：绿色；左：0px；顶部：200像素；}100%{背景：红色；左：0px；top:0px;}}@-o-keyframesmyfirst{/*Opera*/0%{background:red;左：0px；顶部：0px；}25%{背景：黄色；左：200px；top:0px;}50%{背景:蓝色;左：200px；顶部：200像素；}75%{背景：绿色；左：0px；%{背景：红色；左：0px；top:0px;}}实例3，使用js+Transform和Animation实现3D动画实例地址：https://webkit.org/blog-files...只有webkit内核浏览才能看到相关的3D动画效果实际效果如图所示：css代码：body{font-family:'LucidaGrande',Verdana,Arial;字体大小：12px；}#stage{边距：150px自动；宽度：600px；高度：400px；-webkit视角：800；}#rotate{边距：0自动；宽度：600px；高度：400px；-webkit-transform-style:preserve-3d;-webkit-动画名称：x-spin；-webkit-动画持续时间：7s；-webkit-animation-iteration-count：无限；-webkit-animation-timing-function：线性；}.ring{保证金：0自动；高度：110px；宽度：600px；-webkit-transform-style:preserve-3d;-webkit-animation-iteration-count：无限；-webkit-animation-timing-function：线性；}.ring>:nth-child(odd){背景颜色：#995C7F;}.ring>:nth-child(even){背景颜色：#835A99;}.poster{位置离子：绝对的；左：250px；宽度：100px；高度：100px；不透明度：0.7；颜色：rgba(0,0,0,0.9)；-webkit-边框半径：10px；}.poster>p{font-family:'Georgia',serif;字体大小：36px；字体粗细：粗体；文本对齐：居中；顶部边距：28px；}#ring-1{-webkit-animation-name:y-spin;-webkit-动画持续时间：5s；}#ring-2{-webkit-animation-name:back-y-spin;-webkit-动画持续时间：4s；}#ring-3{-webkit-animation-name:y-spin;-webkit-动画持续时间：3s；}@-webkit-keyframesx-spin{0%{-webkit-transform:rotateX(0deg);}50%{-webkit-transform:rotateX(180deg);}100%{-webkit-transform:rotateX(360deg);}}@-webkit-keyframesy-spin{0%{-webkit-transform:rotateY(0deg);}50%{-webkit-transform:rotateY(180deg);}100%{-webkit-transform:rotateY(360deg);}}@-webkit-keyframesback-y-spin{0%{-webkit-transform:rotateY(360deg);}50%{-webkit-transform:rotateY(180deg);}100%{-webkit-transform:rotateY(0deg);}}html代码：
