码迷,mamicode.com
首页 > Web开发 > 详细

使用CSS3实现超炫的Loading(加载)动画效果

时间:2014-10-02 13:17:52      阅读:312      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   os   使用   ar   for   

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

使用CSS3实现超炫的Loading(加载)动画效果

标签:style   blog   http   color   io   os   使用   ar   for   

原文地址:http://www.cnblogs.com/Hcjer/p/4003972.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!