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

在线预览    源码下载

爱编程-编程爱好者经验分享平台
版权所有 爱编程 © Copyright 2012. All Rights Reserved.
闽ICP备12017094号-3