这是一组效果非常炫酷的CSS3页面预加载loading动画特效。该特效共有30种不同的loading效果。所有的加载动画都是使用CSS3来完成,jQuery代码只是用于隐藏加载动画。当你点击页面的任何一个地方时,loading动画就会被隐藏。
这30种loading动画分为3组:方形加载动画特效、圆形加载动画特效和长条形加载动画特效。每一种效果都有一个单独的页面,你可以对应查看每种效果的CSS代码。
制作方法
HTML结构
下面是第一种效果的制作方式。所有的DEMO都是使用嵌套div的HTML结构。在第一个DEMO中,嵌套了4层div元素,其中最里层的div#object是用于动画的元素。
外层的div元素主要用于定位。
CSS样式
首先要设置最外层的div的定位方式为固定定位方式,这样方便它里面的元素制作各种动画效果。
#loading{
background-color: #bd4932;
height: 100%;
width: 100%;
position: fixed;
z-index: 1;
margin-top: 0px;
top: 0px;
}
接着分别设置第二层和第三层div元素。第二层div元素设置为相对定位,宽度和高度均为100%。第三层div是实际动画元素的包裹元素,它设置为绝度定位,并且位置居中。
#loading-center{
width: 100%;
height: 100%;
position: relative;
}
#loading-center-absolute { <