html5加css预加载进度条动画,3种炫酷纯CSS3预加载动画特效

这是一组使用纯CSS3制作的预加载动画特效。这组CSS3预加载动画特效共有3种动画效果，分别是翻书效果，摇晃动画和旋转动画。

使用方法

这组特效使用bootstrap网格系统来进行布局，使用时在页面中引入bootstrap文件。

HTML结构

以第一种翻书预加载动画效果为例，它的HMTL结构如下：

CSS样式

为loader添加下面的CSS样式，翻书动画通过CSS3 animation动画来实现。

.loader{

width: 56px;

height: 50px;

margin: 50px auto;

position: relative;

perspective: 100px;

perspective-origin: 50% 100%;

transform-style: preserve-3d;

transform: translateZ(-1px);

}

.loader .loader-inner{

width: 50%;

height: 100%;

background: #fff;

border: 3px solid #fc440f;

position: absolute;

right: 0;

transform-origin: 0% 100%;

}

.loader .loader-inner:first-child{

left: 0;

}

.loader .loader-inner hr{

margin: 3px 3px 6px;

border: 1px solid rgba(252,68,15, 0.9);

}

.loader .loader-inner.box{

-webkit-animation: loading-1 3.6s infinite ease-in-out;

animation: loading-1 3.6s infinite ease-in-out;

}

.loader .loader-inner.box-1{

animation-delay: .2s;

}

.loader .loader-inner.box-2{

animation-delay: .4s;

}

.loader .loader-inner.box-3{

animation-delay: 0.6s;

}

.loader .loader-inner.box-4{

animation-delay: 0.8s;

}

.loader .loader-inner.box-5{

animation-delay: 1.8s;

}

.loader .loader-inner.box-6{

animation-delay: 2.2s;

}

@-webkit-keyframes loading-1{

25%,100%{

transform: translateX(3px) rotateY(-180deg);

}

}

@keyframes loading-1{

25%,100%{

transform: translateX(3px) rotateY(-180deg);

}

}

其它两种CSS3预加载动画特效的代码请参考下载文件。