使用CSS3实现超炫的Loading（加载）动画效果

SpinKit 是一套网页动画效果，包含8种基于 CSS3 实现的很炫的加载动画。借助 CSS3 Animation 的强大功能来创建平滑，易于定制的动画。SpinKit 的目标不是提供一个每个浏览器都兼容的解决方案，而是给现代浏览器提供更优的技术实现方案和更佳的使用体验。（为保证最佳的效果，请在 Chrome、Firefox 和 Safari 等现代浏览器中浏览）

　　Loading 动画效果一

　　HTML 代码：

<div class="spinner"> 

<div class="rect1"></div> 

<div class="rect2"></div> 

<div class="rect3"></div> 

<div class="rect4"></div> 

<div class="rect5"></div> 

</div>

　　CSS 代码：

.spinner { 

margin: 100px auto; 

width: 50px; 

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); 

} 

}

　　Loading 动画效果二

　　HTML 代码：

<div class="spinner"></div>

　　CSS 代码：

.spinner { 

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); 

} 

}

　　Loading 动画效果三

　　HTML 代码：

<div class="spinner"> 

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

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

</div>

　　CSS 代码：

.spinner { 

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); 

} 

}

　　Loading 动画效果四

　　HTML 代码：

　　CSS 代码：

.spinner { 

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); 

-webkit-transform: rotate(-360deg); 

} 

}

　　Loading 动画效果五

　　HTML 代码：

　　CSS 代码：

.spinner { 

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); 

} 

}

　　Loading 动画效果六

　　HTML 代码：

<div class="spinner"> 

<div class="bounce1"></div> 

<div class="bounce2"></div> 

<div class="bounce3"></div> 

</div>

　　CSS 代码：

.spinner { 

margin: 100px auto 0; 

width: 150px; 

text-align: center; 

} 

.spinner > 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; 

} 

.spinner .bounce1 { 

-webkit-animation-delay: -0.32s; 

animation-delay: -0.32s; 

} 

.spinner .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); 

} 

}

　　Loading 动画效果七

　　HTML 代码：

<div class="spinner"></div>

　　CSS 代码：

.spinner { 

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; 

} 

}

　　Loading 动画效果八

　　HTML 代码：

<div class="spinner"> 

<div class="spinner-container container1"> 

<div class="circle1"></div> 

<div class="circle2"></div> 

<div class="circle3"></div> 

<div class="circle4"></div> 

</div> 

<div class="spinner-container container2"> 

<div class="circle1"></div> 

<div class="circle2"></div> 

<div class="circle3"></div> 

<div class="circle4"></div> 

</div> 

<div class="spinner-container container3"> 

<div class="circle1"></div> 

<div class="circle2"></div> 

<div class="circle3"></div> 

<div class="circle4"></div> 

</div> 

</div>

　　CSS 代码：

.spinner { 

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; 

} 

.spinner .spinner-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); 

} 

}

本文转载自：http://www.admin10000.com/document/3601.html