15种漂亮的css3 loading动画特效【源码案例】

在之前，跟大家分享过很多关于loading动画的特效，今天这15款漂亮的css3 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; }

完整源码下载地址： https://tc5.us/file/21793581-403550556