css3超炫loading加载特效css代码.

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 css3超炫loading加载特效css代码. 的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css3超炫loading加载特效</title>
<link href="css/zzsc.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="zzsc1">
  <div class="rect1"></div>
  <div class="rect2"></div>
  <div class="rect3"></div>
  <div class="rect4"></div>
  <div class="rect5"></div>
</div>

<div class="zzsc2"></div>

<div class="zzsc3">
  <div class="double-bounce1"></div>
  <div class="double-bounce2"></div>
</div>

<div class="zzsc4">
  <div class="cube1"></div>
  <div class="cube2"></div>
</div>

<div class="zzsc5">
  <div class="dot1"></div>
  <div class="dot2"></div>
</div>

<div class="zzsc6">
  <div class="bounce1"></div>
  <div class="bounce2"></div>
  <div class="bounce3"></div>
</div>

<div class="zzsc7"></div>

<div class="zzsc8">
  <div class="zzsc8-container container1">
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
    <div class="circle4"></div>
  </div>
  <div class="zzsc8-container container2">
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
    <div class="circle4"></div>
  </div>
  <div class="zzsc8-container container3">
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
    <div class="circle4"></div>
  </div>
</div>
</body>
</html>

CSS代码(zzsc.css):

.zzsc1{margin:100px auto;width:50px;height:60px;text-align:center;font-size:10px;}
.zzsc1 > 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;}
.zzsc1 .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s;}
.zzsc1 .rect3{-webkit-animation-delay:-1.0s;animation-delay:-1.0s;}
.zzsc1 .rect4{-webkit-animation-delay:-0.9s;animation-delay:-0.9s;}
.zzsc1 .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);}
}
.zzsc2{width:60px;height:60px;background-color:#67CF22;margin:100px auto;-webkit-animation:rotateplane 1.2s infinite ease-in-out;animation:rotateplane 1.2s infinite ease-in-out;}
@-webkit-keyframes rotateplane{0%{-webkit-transform:perspective(120px)}
50%{-webkit-transform:perspective(120px) rotateY(180deg)}
100%{-webkit-transform:perspective(120px) rotateY(180deg) rotateX(180deg)}
}
@keyframes rotateplane{0%{transform:perspective(120px) rotateX(0deg) rotateY(0deg);-webkit-transform:perspective(120px) rotateX(0deg) rotateY(0deg)}
50%{transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg);-webkit-transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg)}
100%{transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);}
}
.zzsc3{width:60px;height:60px;position:relative;margin:100px auto;}
.double-bounce1,.double-bounce2{width:100%;height:100%;border-radius:50%;background-color:#67CF22;opacity:0.6;position:absolute;top:0;left:0;-webkit-animation:bounce 2.0s infinite ease-in-out;animation:bounce 2.0s infinite ease-in-out;}
.double-bounce2{-webkit-animation-delay:-1.0s;animation-delay:-1.0s;}
@-webkit-keyframes bounce{0%,100%{-webkit-transform:scale(0.0)}
50%{-webkit-transform:scale(1.0)}
}
@keyframes bounce{0%,100%{transform:scale(0.0);-webkit-transform:scale(0.0);}
50%{transform:scale(1.0);-webkit-transform:scale(1.0);}
}
.zzsc4{margin:100px auto;width:32px;height:32px;position:relative;}
.cube1,.cube2{background-color:#67CF22;width:30px;height:30px;position:absolute;top:0;left:0;-webkit-animation:cubemove 1.8s infinite ease-in-out;animation:cubemove 1.8s infinite ease-in-out;}
.cube2{-webkit-animation-delay:-0.9s;animation-delay:-0.9s;}
@-webkit-keyframes cubemove{25%{-webkit-transform:translateX(42px) rotate(-90deg) scale(0.5)}
50%{-webkit-transform:translateX(42px) translateY(42px) rotate(-180deg)}
75%{-webkit-transform:translateX(0px) translateY(42px) rotate(-270deg) scale(0.5)}
100%{-webkit-transform:rotate(-360deg)}
}
@keyframes cubemove{25%{transform:translateX(42px) rotate(-90deg) scale(0.5);-webkit-transform:translateX(42px) rotate(-90deg) scale(0.5);}
50%{transform:translateX(42px) translateY(42px) rotate(-179deg);-webkit-transform:translateX(42px) translateY(42px) rotate(-179deg);}
50.1%{transform:translateX(42px) translateY(42px) rotate(-180deg);-webkit-transform:translateX(42px) translateY(42px) rotate(-180deg);}
75%{transform:translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);-webkit-transform:translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);}
100%{transform:rotate(-360deg);/* www.datouwang.com */
 -webkit-transform:rotate(-360deg);}
}
.zzsc5{margin:100px auto;width:90px;height:90px;position:relative;text-align:center;-webkit-animation:rotate 2.0s infinite linear;animation:rotate 2.0s infinite linear;}
.dot1,.dot2{width:60%;height:60%;display:inline-block;position:absolute;top:0;background-color:#67CF22;border-radius:100%;-webkit-animation:bounce 2.0s infinite ease-in-out;animation:bounce 2.0s infinite ease-in-out;}
.dot2{top:auto;bottom:0px;-webkit-animation-delay:-1.0s;animation-delay:-1.0s;}
@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg)}
}
@keyframes rotate{100%{transform:rotate(360deg);-webkit-transform:rotate(360deg)}
}
@-webkit-keyframes bounce{0%,100%{-webkit-transform:scale(0.0)}
50%{-webkit-transform:scale(1.0)}
}
@keyframes bounce{0%,100%{transform:scale(0.0);-webkit-transform:scale(0.0);}
50%{transform:scale(1.0);-webkit-transform:scale(1.0);}
}
.zzsc6{margin:100px auto 0;width:150px;text-align:center;}
.zzsc6 > div{width:30px;height:30px;background-color:#67CF22;border-radius:100%;display:inline-block;-webkit-animation:bouncedelay 1.4s infinite ease-in-out;animation:bouncedelay 1.4s infinite ease-in-out;/* Prevent first frame from flickering when animation starts */
 -webkit-animation-fill-mode:both;animation-fill-mode:both;}
.zzsc6 .bounce1{-webkit-animation-delay:-0.32s;animation-delay:-0.32s;}
.zzsc6 .bounce2{-webkit-animation-delay:-0.16s;animation-delay:-0.16s;}
@-webkit-keyframes bouncedelay{0%,80%,100%{-webkit-transform:scale(0.0)}
40%{-webkit-transform:scale(1.0)}
}
@keyframes bouncedelay{0%,80%,100%{transform:scale(0.0);-webkit-transform:scale(0.0);}
40%{transform:scale(1.0);-webkit-transform:scale(1.0);}
}
.zzsc7{width:40px;height:40px;margin:100px auto;background-color:#333;border-radius:100%;-webkit-animation:scaleout 1.0s infinite ease-in-out;animation:scaleout 1.0s infinite ease-in-out;}
@-webkit-keyframes scaleout{0%{-webkit-transform:scale(0.0)}
100%{-webkit-transform:scale(1.0);opacity:0;}
}
@keyframes scaleout{0%{transform:scale(0.0);-webkit-transform:scale(0.0);}
100%{transform:scale(1.0);-webkit-transform:scale(1.0);opacity:0;}
}
.zzsc8{margin:100px auto;width:20px;height:20px;position:relative;}
.container1 > div,.container2 > div,.container3 > div{width:6px;height:6px;background-color:#333;border-radius:100%;position:absolute;-webkit-animation:bouncedelay 1.2s infinite ease-in-out;animation:bouncedelay 1.2s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both;}
.zzsc8 .zzsc8-container{position:absolute;width:100%;height:100%;}
.container2{-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg);}
.container3{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg);}
.circle1{top:0;left:0;}
.circle2{top:0;right:0;}
.circle3{right:0;bottom:0;}
.circle4{left:0;bottom:0;}
.container2 .circle1{-webkit-animation-delay:-1.1s;animation-delay:-1.1s;}
.container3 .circle1{-webkit-animation-delay:-1.0s;animation-delay:-1.0s;}
.container1 .circle2{-webkit-animation-delay:-0.9s;animation-delay:-0.9s;}
.container2 .circle2{-webkit-animation-delay:-0.8s;animation-delay:-0.8s;}
.container3 .circle2{-webkit-animation-delay:-0.7s;animation-delay:-0.7s;}
.container1 .circle3{-webkit-animation-delay:-0.6s;animation-delay:-0.6s;}
.container2 .circle3{-webkit-animation-delay:-0.5s;animation-delay:-0.5s;}
.container3 .circle3{-webkit-animation-delay:-0.4s;animation-delay:-0.4s;}
.container1 .circle4{-webkit-animation-delay:-0.3s;animation-delay:-0.3s;}
.container2 .circle4{-webkit-animation-delay:-0.2s;animation-delay:-0.2s;}
.container3 .circle4{-webkit-animation-delay:-0.1s;animation-delay:-0.1s;}
@-webkit-keyframes bouncedelay{0%,80%,100%{-webkit-transform:scale(0.0)}
40%{-webkit-transform:scale(1.0)}
}
@keyframes bouncedelay{0%,80%,100%{transform:scale(0.0);-webkit-transform:scale(0.0);}
40%{transform:scale(1.0);-webkit-transform:scale(1.0);}
}

附件:下载该文件资源,减少时间成本(增值服务)