html5 图片下拉加载动画效果,HTML5和CSS3炫酷彩色loading加载动画特效

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

使用方法

HTML结构

第一种loading加载动画特效的HTML结构由

组成。

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

}

}