使用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 代码：

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

　　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 代码：

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

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

完整源码下载

欢迎大家阅读《使用CSS3实现超炫的Loading（加载）动画效果》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码

喜欢 (0)赏

[搞代码]

分享 (0)