HTML5和CSS3炫酷彩色loading加载动画特效

这是一款HTML5和CSS3炫酷彩色loading加载动画特效。该loading加载动画特效共15种动画效果，它们分别通过div盒子或svg元素，配合CSS3来制作loading动画效果。

使用方法

HTML结构

第一种loading加载动画特效的HTML结构由<div>组成。

<div class="loader loader-1">
  <div class="loader-outter"></div>
  <div class="loader-inner"></div>
</div>          
                

CSS样式

通用的loading加载动画样式如下：

.loader { position: relative; width: 60px; height: 60px; border-radius: 50%; margin: 75px; display: inline-block; vertical-align: middle; }
.loader-star { position: absolute; top: calc(50% - 12px); }
                

第一种loading加载动画样式如下：

.loader-1 .loader-outter { 
    position: absolute; 
    border: 4px solid #f50057; 
    border-left-color: transparent; 
    border-bottom: 0; 
    width: 100%; 
    height: 100%; 
    border-radius: 50%; 
    -webkit-animation: loader-1-outter 1s cubic-bezier(.42, .61, .58, .41) infinite; 
    animation: loader-1-outter 1s cubic-bezier(.42, .61, .58, .41) infinite; 
}
.loader-1 .loader-inner { 
    position: absolute; 
    border: 4px solid #f50057; 
    border-radius: 50%; 
    width: 40px; 
    height: 40px; 
    left: calc(50% - 20px); 
    top: calc(50% - 20px); 
    border-right: 0; 
    border-top-color: transparent; 
    -webkit-animation: loader-1-inner 1s cubic-bezier(.42, .61, .58, .41) infinite; 
    animation: loader-1-inner 1s cubic-bezier(.42, .61, .58, .41) infinite; 
}       
                

用于制作动画效果的animation帧动画如下：

 @-webkit-keyframes loader-1-outter {
 0% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 100% {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
}
}
 @keyframes loader-1-outter {
 0% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 100% {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
}
}
 @-webkit-keyframes loader-1-inner {
 0% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 100% {
 -webkit-transform: rotate(-360deg);
 transform: rotate(-360deg);
}
}
 @keyframes loader-1-inner {
 0% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 100% {
 -webkit-transform: rotate(-360deg);
 transform: rotate(-360deg);
}
}