如何利用HTML5实现等待加载动画的效果

script

创新互联网站建设由有经验的网站设计师、开发人员和项目经理组成的专业建站团队，负责网站视觉设计、用户体验优化、交互设计和前端开发等方面的工作，以确保网站外观精美、网站建设、成都网站设计易于使用并且具有良好的响应性。

document.onreadystatechange=function(){

if(document.readyState=='complete'){

$('.loading').fadeOut();

}

}

/script

html5的优点

HTML5为什么如此受欢迎？主要因为它本身的优势。HTML5的主要优势如下：

1、基于HTML5强大的兼容性。因为HTML5提供了前所未有的数据与应用接入开放接口，使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联，就因为这种强大的兼容性，使得在当下开发界是如此的火，同样也是因为这强大的兼容性，使得手机应用软件，app更适合，也更方便。所以更适合手机app软件开发，正好补充了手机小巧的不足。

2、HTML5开发支持的手机系统有android、ios。

3、HTML5其突出的特点就是强化了web页的表现性,追加了本地数据库，可以用作离线应用的开发，离线应用就是把需要的资源先缓存到本地，下次再查看时无需联网。

4、HTML5开发能提供更快、更简便的服务，代码可高度重用，服务发布方便。

5、动画、游戏动态效果，地理定位等很多app应用正在崛起，而HTML5技术的强大优势就是这种让我们惊叹的效果。而未来采用HTML5开发app的，将会大量减少代码量，应用软件也会得到更高的用户体验，更好的视觉效果。

HTML5+CSS3小实例：手风琴式加载动画

HTML5+CSS3做一个手风琴式的加载动画，这动画、这质感、这配色，就问你喜不喜欢？！这个案例的知识点主要是：css的自定义属性 + 动画延迟 + 颜色滤镜（hue-rotate）。

效果：

源码：

如何利用html5制作出loading加载效果

我用css3写了个demo

html

head

meta charset="utf-8"/

titleLoading/title

style

.spinner {

margin: 100px auto;

width: 60px;

height: 60px;

text-align: center;

font-size: 10px;

}

.spinner div {

background-color: #67CF22;

height: 100%;

width: 6px;

display: inline-block;

-webkit-animation: stretchdelay 1.2s infinite ease-in-out;

animation: stretchdelay 1.2s infinite ease-in-out;

}

.spinner .rect2 {

-webkit-animation-delay: -1.1s;

animation-delay: -1.1s;

}

.spinner .rect3 {

-webkit-animation-delay: -1.0s;

animation-delay: -1.0s;

}

.spinner .rect4 {

-webkit-animation-delay: -0.9s;

animation-delay: -0.9s;

}

.spinner .rect5 {

-webkit-animation-delay: -0.8s;

animation-delay: -0.8s;

}

@-webkit-keyframes stretchdelay {

0%, 40%, 100% { -webkit-transform: scaleY(0.4) }

20% { -webkit-transform: scaleY(1.0) }

}

@keyframes stretchdelay {

0%, 40%, 100% {

transform: scaleY(0.4);

-webkit-transform: scaleY(0.4);

} 20% {

transform: scaleY(1.0);

-webkit-transform: scaleY(1.0);

}

}

/style

/head

body

div class="spinner"

div class="rect1"/div

div class="rect2"/div

div class="rect3"/div

div class="rect4"/div

div class="rect5"/div

/div

/body

/html

html5网站的loading是怎么做的

loadding动画现在有2中方式实现：

1.旧方法：用PS或者Flash制作gif格式的动态图片，导入到html里面

2.用css3的动画属性（animite）,直接通过样式+div就可以制作出loading效果

当然优缺点也很明显，第一种方法不需要考虑兼容性，第二种方法，适用于移动端和PC端上高版本的浏览器，因为低版本的浏览器对css3的兼容性只有一个词来形容--坑爹啊。