<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>30种CSS3炫酷页面预加载loading动画特效</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="css/Icomoon/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-2.0.2.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<style>
#loading{
background-color: #d64700;
height: 100%;
width: 100%;
position: fixed;
z-index: 1;
margin-top: 0px;
top: 0px;
}
#loading-center{
width: 100%;
height: 100%;
position: relative;
}
#loading-center-absolute {
position: absolute;
left: 50%;
top: 50%;
height: 100px;
width: 100px;
margin-top: -50px;
margin-left: -50px;
}
.object{
position: absolute;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 20px solid #FFF;
}
.object:nth-child(25){
bottom: 0px;
left: 80px;
-webkit-animation: animate_25 3s infinite ease-in-out;
animation: animate_25 3s infinite ease-in-out;
}
.object:nth-child(24){
bottom: 0px;
left: 60px;
-webkit-animation: animate_24 3s infinite ease-in-out;
animation: animate_24 3s infinite ease-in-out;
}
.object:nth-child(23){
bottom: 0px;
left: 40px;
-webkit-animation: animate_23 3s infinite ease-in-out;
animation: animate_23 3s infinite ease-in-out;
}
.object:nth-child(22){
bottom: 0px;
left: 20px;
-webkit-animation: animate_22 3s infinite ease-in-out;
animation: animate_22 3s infinite ease-in-out;
}
.object:nth-child(21){
bottom: 0px;
left: 0px;
-webkit-animation: animate_21 3s infinite ease-in-out;
animation: animate_21 3s infinite ease-in-out;
}
.object:nth-child(20){
bottom: 0px;
left: 70px;
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-animation: animate_20 3s infinite ease-in-out;
animation: animate_20 3s infinite ease-in-out;
}
.object:nth-child(19){
bottom: 0px;
left: 50px;
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-animation: animate_19 3s infinite ease-in-out;
animation: animate_19 3s infinite ease-in-out;
}
.object:nth-child(18){
bottom: 0px;
left: 30px;
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-animation: animate_18 3s infinite ease-in-out;
animation: animate_18 3s infinite ease-in-out;
}
.object:nth-child(17){
bottom: 0px;
left: 10px;
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-animation: animate_17 3s infinite ease-in-out;
animation: animate_17 3s infinite ease-in-out;
}
.object:nth-child(16){
bottom: 20px;
left: 70px;
-webkit-animation: animate_16 3s infinite ease-in-out;
animation: animate_16 3s infinite ease-in-out;
}
.object:nth-child(15){
bottom: 20px;
left: 50px;
-webkit-animation: animate_15 3s infinite ease-in-out;
animation: animate_15 3s infinite ease-in-out;
}
.object:nth-child(14){
bottom: 20px;
left: 30px;
-webkit-animation: animate_14 3s infinite ease-in-out;
animation: animate_14 3s infinite ease-in-out;
}
.object:nth-child(13){
bottom: 20px;
left: 10px;
-webkit-animation: animate_13 3s infinite ease-in-out;
animation: animate_13 3s infinite ease-in-out;
}
.object:nth-child(12){
bottom: 20px;
left: 60px;
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-animation: animate_12 3s infinite ease-in-out;
animation: animate_12 3s infinite ease-in-out;
}
.object:nth-child(11){
bottom: 20px;
left: 40px;
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-animation: animate_11 3s infinite ease-in-out;
animation: animate_11 3s infinite ease-in-out;
}
.object:nth-child(10){
bottom: 20px;
left: 20px;
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-animation: animate_10 3s infinite ease-in-out;
animation: animate_10 3s infinite ease-in-out;
}
.object:nth-child(9){
bottom: 40px;
left: 60px;
-webkit-animation: animate_9 3s infinite ease-in-out;
animation: animate_9 3s infinite ease-in-out;
}
.object:nth-child(8){
bottom: 40px;
left: 40px;
-webkit-animation: animate_8 3s infinite ease-in-out;
animation: animate_8 3s infinite ease-in-out;
}
.object:nth-child(7){
bottom: 40px;
left: 20px;
-webkit-animation: animate_7 3s infinite ease-in-out;
animation: animate_7 3s infinite ease-in-out;
}
.object:nth-child(6){
bottom: 40px;
left: 50px;
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-animation: animate_6 3s infinite ease-in-out;
animation: animate_6 3s infinite ease-in-out;
}
.object:nth-child(5){
bottom: 40px;
left: 30px;
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-animation: animate_5 3s infinite ease-in-out;
animation: animate_5 3s infinite ease-in-out;
}
.object:nth-child(4){
bottom: 60px;
left: 50px;
-webkit-animation: animate_4 3s infinite ease-in-out;
animation: animate_4 3s infinite ease-in-out;
}
.object:nth-child(3){
bottom: 60px;
left: 30px;
-webkit-animation: animate_3 3s infinite ease-in-out;
animation: animate_3 3s infinite ease-in-out;
}
.object:nth-child(2){
bottom: 60px;
left: 40px;
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-animation: animate_2 3s infinite ease-in-out;
animation: animate_2 3s infinite ease-in-out;
}
.object:nth-child(1){
bottom: 80px;
left: 40px;
-webkit-animation: animate_1 3s infinite ease-in-out;
animation: animate_1 3s infinite ease-in-out;
}
@-webkit-keyframes animate_1 {
50% {
-ms-transform: translate(0,-100px) rotate(180deg);
-webkit-transform: translate(0,-100px) rotate(180deg);
transform: translate(0,-100px) rotate(180deg);
}
}
@keyframes animate_1 {
50% {
-ms-transform: translate(0,-100px) rotate(180deg);
-webkit-transform: translate(0,-100px) rotate(180deg);
transform: translate(0,-100px) rotate(180deg);
}
}
@-webkit-keyframes animate_2 {
50% {
-ms-transform: translate(0,-80px) rotate(180deg);
-webkit-transform: translate(0,-80px) rotate(180deg);
transform: translate(0,-80px) rotate(180deg);
}
}
@keyframes animate_2 {
50% {
-ms-transform: translate(0,-80px) rotate(180deg);
-webkit-transform: translate(0,-80px) rotate(180deg);
transform: translate(0,-80px) rotate(180deg);
}
}
@-webkit-keyframes animate_3 {
50% {
-ms-transform: translate(-100px,-100px) rotate(180deg);
-webkit-transform: translate(-100px,-100px) rotate(180deg);
transform: translate(-100px,-100px) rotate(180deg);
}
}
@keyframes animate_3 {
50% {
-ms-transform: translate(-100px,-100px) rotate(180deg);
-webkit-transform:translate(-100px,-100px) rotate(180deg);
transform: translate(-100px,-100px) rotate(180deg);
30种CSS3炫酷页面预加载loading动画特效源码.zip （47个子文件） 
132677714835765436 CSS3_loading30 css Icomoon 
icomoon.woff 103KB
icomoon.svg 361KB icomoon.eot 75KB style.css 31KB icomoon.ttf 75KB default.css 6KB animate.css 74KB normalize.css 2KB
demo7.html 8KB related 
2.jpg 23KB 1.jpg 24KB demo24.html 5KB demo27.html 5KB demo12.html 8KB demo23.html 4KB demo17.html 6KB demo2.html 8KB demo19.html 6KB demo26.html 5KB demo14.html 5KB fonts icomoon.woff 1KB icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB demo8.html 6KB demo1.html 4KB demo13.html 6KB index.html 3KB demo11.html 5KB js jquery-2.0.2.min.js 81KB main.js 152B demo5.html 6KB demo4.html 9KB demo16.html 6KB demo25.html 5KB demo15.html 7KB demo6.html 9KB demo28.html 5KB demo3.html 7KB demo20.html 6KB demo22.html 4KB demo18.html 5KB demo30.html 21KB demo10.html 7KB demo9.html 8KB demo21.html 4KB demo29.html 8KB资源评论
毕业_设计
- 粉丝: 1992
- 资源: 1万+
