css3动画-加载中...
写几个简单的加载中动画吧。 像前面三种都是相当于几个不同的点轮流来播放同一动画:变大变小。css3里面有一个用于尺度变换的方法: scale( x , y ) : 定义 2D 缩放转换,改变元素的宽度和高度 。 第四种就是一个小球从上往下跌落,再弹回去,在上面的时候速度最小,下面的时候速度最大。由于该小球只进行了上下的移动,所以我们可以运用: translateY( n ):定义 2D 转换,沿着 Y 轴移动元素, 从而实现小球沿Y方向来回移动。 废话不多说了,上代码。 首先,第一个加载中的动画: 1 <div id="loading1"> 2 <div class="demo1"></div> 3 <div class="demo1"></div> 4 <div class="demo1"></div> 5 <div class="demo1"></div> 6 <div class="demo1"></div> 7 </div> html Code 1 .demo1 { 2 width: 4px; 3 height: 4px; 4 border-radius: 2px; 5 background: #68b2ce; 6 float: left; 7 margin: 0 3px; 8 animation: demo1 linear 1s infinite; 9 -webkit