![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9lWENTUmp5TlljWmljSFgyR2VpYURYN3M2ZGljZFVKdnd1NVp1SEREb3VUTDBOcUd5ZnliMXUwQmFpYTlLR2VRRHlES3E5dllwMGMwYkV3ck0wWGZheW9yalEvNjQw?x-oss-process=image/format,png)
今天跟大家分享一组漂亮的css3 loading动画特效,该特效中包含了15种不同的loading动画效果,他们通过简单的HTML结构和CSS3代码来实现。
loading动画截图效果如下:
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9lWENTUmp5TlljYjF1T05pYWtiNVpzdTBIZHZ6QnFHNDlPQkNSMFNFWGVxaWFPd2liaFFjcmpZdzR4Mm9GbVlUUkI0U0pnSm9WTWtpYUFpY0k4VDN1YmtCTkRnLzY0MA?x-oss-process=image/format,png)
loading动画特效演示地址:https://codepen.io/slyka85/pen/QvBQPb
具体使用方法
HTML结构
第一个示例的基本HTML结构如下。
<p><div class="loader loader-1"><div class="loader-outter"></div><div class="loader-inner"></div></div></p>
|
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://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9lWENTUmp5TlljWmljSFgyR2VpYURYN3M2ZGljZFVKdnd1NWliTDlyVE5YaWFmYm1tSUxDa2hncENySUdFRGdaZmwweFNRcURPdkduaWMzQUFCMVBjNVl2WmtuQS82NDA?x-oss-process=image/format,png)
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9lWENTUmp5TlljYlpzUTFjcTFpYzJIV2hwcmhEVkFOcGt3WVpQd2xBV29scUFiUTZZenhQT3FncE5pYUlEaWNJaWN2MU9XZG1zd21TRWREanJyVUlkSWN2elEvNjQw?x-oss-process=image/format,png)