html好看的动画效果图,15种漂亮的css3 loading动画特效

这是一款漂亮的css3 loading动画特效。该特效中包含了15种不同的loading动画效果，他们通过简单的HTML结构和CSS3代码来实现。

使用方法

HTML结构

第一个示例的基本HTML结构如下。

CSS样式

然后添加下面的CSS样式。

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

}