html+div+动画效果,CSS3效果：animate实现点点点loading动画效果（一）

实现如图所示的点点点loading效果：

一：CSS3 animation实现代码

提交订单中...

css代码：

.ani_dot{font-family:simsun;

}:root .ani_dot{ /*这里使用Hack是因为IE6~IE8浏览器下， vertical-align解析不规范，值为bottom或其他会改变按钮的实际高度*/display:inline-block;width:1.5em;vertical-align:bottom;overflow:hidden;

}@-webkit-keyframes dot{0% { width:0;margin-right:1.5em; }33%{width:.5em;1em; }66%{1em;.5em; }100%{0;}}

.ani_dot{-webkit-animation:dot 3s infinite step-start;

}@keyframes dot{animation:dot 3s infinite step-start;

}

出现的就是如图所示的结果。

注意点：

1.IE10+以及其他浏览器，点点点动画消失，IE6-IE9是普通的点点点文字。

2.animate动画是连续的，但是我们这儿是一帧一帧的，一卡一卡的，不是那么连续的效果，用到step-start。

3.上面代码还