使用CSS3构建Ajax加载动画
原文地址:http://webdesignersdesk.com/2010/05/create-ajax-loading-animation-with-css3/
译者:蒋宇捷
通常前端工程师采用gif动画图片来表现Ajax的加载。但是现在css3已经引入了动画属性,我们可以在不采用gif动画图片的情况下,采用css3达到同样的Ajax加载动画效果。那么让我们现在开始来实现想要的效果。
重要提示:只支持Webkit内核的浏览器(Safari和Chrome)
示例
HTML
在这里我们只展示demo里第一个Ajax载入示例的代码。首先我们需要一个名为“loading”的容器,以放置所有的动画元素。然后我们需要为每一列定义一个单独的div,并且统一定义一个class属性。
<div id='loading'>
<div id='coloumn1' class='coloumns'></div>
<div id='coloumn2' class='coloumns'></div>
<div id='coloumn3' class='coloumns'></div>
<div id='coloumn4' class='coloumns'></div>
<div id='coloumn5' class='coloumns'></div>
<div id='coloumn6' class='coloumns'></div>
</div>
用CSS3设计动画
下面所有的代码都带有注释。
#loading{
margin-top:30px;
float:left;
width:95px;
height:32px;
background-color:#779ec2;
margin-left:30px;
/* CSS3圆角边框 */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.coloumns{
background-color:#fff;
border:1px solid #fff;
float:left;
height:30px;
margin-left:5px;
width:10px;
/* 在这儿我们定义一个动画名,随后我们将会实现它 */
-webkit-animation-name: animation;
/* 动画循环一次的总时间 */
-webkit-animation-duration: 3s;
/* 动画的循环次数,我们设置为无穷大 */
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: linear;
/* 最初所有列的透明度都为0 */
opacity:0;
/* 开始时将它缩放为0.8 */
-webkit-transform:scale(0.8);
}
#coloumn1{
/* 第一列动画延迟0.3秒 */
-webkit-animation-delay: .3s;
}
#coloumn2{
/* 第二列动画延迟0.4秒 */
-webkit-animation-delay: .4s;
}
#coloumn3{
/* 第三列动画延迟0.5秒*/
-webkit-animation-delay: .5s;
}
#coloumn4{
/* 第四列动画延迟0.6秒*/
-webkit-animation-delay: .6s;
}
#coloumn5{
/* 第四列动画延迟0.7秒*/
-webkit-animation-delay: .7s;
}
#coloumn6{
/* 第四列动画延迟0.8秒*/
-webkit-animation-delay: .8s;
}
/* 之前我们曾经定义过动画的名称,我们在这儿设置动画的属性 */
@-webkit-keyframes animation{
/* 在动画开始时每一列的透明度都是0 */
0%{opacity:0;}
/* 在动画中间时每一列的透明度都是1 */
50%{opacity:1;}
/*在动画结束时每一列的透明度都还原到0 */
100%{opacity:0;}
}
加载动画2和3的CSS代码
#loading1{
margin-top:30px;
float:left;
margin-left:30px;
}
.coloumns1{
background-color:#39F;
border:1px solid #00F;
float:left;
height:30px;
margin-left:5px;
width:8px;
-webkit-animation-name: animation1;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: linear;
opacity:0.2;
-webkit-transform:scale(0.6);
}
#coloumn11{
-webkit-animation-delay: .3s;
}
#coloumn22{
-webkit-animation-delay: .4s;
}
#coloumn33{
-webkit-animation-delay: .5s;
}
#coloumn44{
-webkit-animation-delay: .6s;
}
#coloumn55{
-webkit-animation-delay: .7s;
}
#coloumn66{
-webkit-animation-delay: .8s;
}
@-webkit-keyframes animation1{
0%{-webkit-transform: scale(.9);opacity:1;}
100%{-webkit-transform: scale(.2);opacity:0.1;}
}
#loading2{
margin-top:30px;
float:left;
margin-left:30px;
}
.coloumns2{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color:#39F;
float:left;
height:20px;
margin-left:5px;
width:20px;
-webkit-animation-name: animation2;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: linear;
opacity:0;
}
#coloumn111{
-webkit-animation-delay: .1s;
}
#coloumn222{
-webkit-animation-delay: .3s;
}
#coloumn333{
-webkit-animation-delay: .5s;
}
#coloumn444{
-webkit-animation-delay: .7s;
}
@-webkit-keyframes animation2{
0%{opacity:0;}
50%{opacity:1;}
100%{opacity:0;}
}
译者注:
现在我们有了四种实现HTML动画的方式:
1、GIF动画图片,优点方便,缺点是256色,背景不能完全透明,效果较差。
2、CSS3控制,缺点是只有在支持CSS3的浏览器上有效果、实现较复杂,优点是效果好,效率高。
3、Javascript实现,效果和CSS实现类似,效率不如原生CSS,但是可以跨浏览器支持。
4、HTML5 Canvas,实现较复杂,能实现更高级的效果。
【使用CSS3构建Ajax加载动画】相关文章
5. 使用 CSS3 实现超炫的 Loading(加载)动画效果
6. 使用 CSS3 实现超炫的 Loading(加载)动画效果
9. 使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果
本文来源:https://www.51html5.com/a3355.html
﹝使用CSS3构建Ajax加载动画﹞相关内容
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
- 构建HTML5应用程序:CSS3 效果、过渡和动画
- 使用CSS制作APPLE WATCH刻度盘动画效果
- 使用 CSS3 Transforms 构建圆形导航
- jQuery图片异步加载和预加载功能
- 利用CSS3制作动画效果
- 利用CSS3制作动画效果
- 用CSS3创建动画价格表
- 教你用CSS3动画实现的超炫过渡特效
- 使用CSS3和RGBa创建超酷的按钮