一些网站或者app在加载新东西的时候，往往会有一些好看有趣的loading图，大部分的loading样式都可以使用css3写出来，不仅比直接使用gif图简单方便，还能节省加载时间和空间，下面我就把20种常见的loading动效图的代码贴出来，大家一起参考学习。
贴出来的代码比较多，大家可以去我的github下载查看源码
效果图为：
以下为对应的html代码：
<!doctype html><head><meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="demo.css"/> <link rel="stylesheet" type="text/css" href="loaders.css"/> <title>css3炫酷页面加载动画特效代码 </title></head><body> <main> <p class="loaders"> <p class="loader"> <p class="loader-inner ball-pulse"> <p></p> <p></p> <p></p> </p> </p> <p class="loader"> <p class="loader-inner ball-grid-pulse"> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> </p> </p> <p class="loader"> <p class="loader-inner ball-clip-rotate"> <p></p> </p> </p> <p class="loader"> <p class="loader-inner ball-clip-rotate-pulse"> <p></p> <p></p> </p> </p> <p class="loader"> <p class="loader-inner square-spin"> <p></p> </p> </p> <p class="loader"> <p class="loader-inner ball-clip-rotate-multiple"> <p></p> <p></p> </p> </p> <p class="loader"> <p class="loader-inner ball-pulse-rise"> <p></p> <p></p> <p></p> <p></p> <p></p> </p> </p> <p class="loader"> <p class="loader-inner ball-rotate"> <p></p> </p> </p> <p class="loader"> <p class="loader-inner cube-transition"> <p></p> <p></p> </p> </p> <p class="loader"> <p class="loader-inner ball-zig-zag"> <p></p> <p></p> </p> </p> <p class="loader"> <p class="loader-inner ball-zig-zag-deflect"> <p></p> <p></p> </p> </p> <p class="loader"> <p class="loader-inner ball-triangle-path"> <p></p> <p></p> <p></p> </p> </p> <p class="loader"> <p class="loader-inner ball-scale"> <p></p> </p> </p> <p class="loader"> <p class="loader-inner line-scale"> <p></p> <p></p> <p></p> <p></p> <p></p> </p> </p> <p class="loader"> <p class="loader-inner line-scale-party"> <p></p> <p></p> <p></p> <p></p> </p> </p> <p class="loader"> <p class="loader-inner ball-scale-multiple"> <p></p> <p></p> <p></p> </p> </p> <p class="loader"> <p class="loader-inner ball-pulse-sync"> <p></p> <p></p> <p></p> </p> </p> <p class="loader"> <p class="loader-inner ball-beat"> <p></p> <p></p> <p></p> </p> </p> <p class="loader"> <p class="loader-inner line-scale-pulse-out"> <p></p> <p></p> <p></p> <p></p> <p></p> </p> </p> <p class="loader"> <p class="loader-inner line-scale-pulse-out-rapid"> <p></p> <p></p> <p></p> <p></p> <p></p> </p> </p> <p class="loader"> <p class="loader-inner ball-scale-ripple"> <p></p> </p> </p> <p class="loader"> <p class="loader-inner ball-scale-ripple-multiple"> <p></p> <p></p> <p></p> </p> </p> <p class="loader"> <p class="loader-inner ball-spin-fade-loader"> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> </p> </p> <p class="loader"> <p class="loader-inner line-spin-fade-loader"> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> </p> </p> <p class="loader"> <p class="loader-inner triangle-skew-spin"> <p></p> </p> </p> <p class="loader"> <p class="loader-inner pacman"> <p></p> <p></p> <p></p> <p></p> <p></p> </p> </p> <p class="loader"> <p class="loader-inner ball-grid-beat"> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> </p> </p> <p class="loader"> <p class="loader-inner semi-circle-spin"> <p></p> </p> </p> </p> </main> <script> document.addeventlistener('domcontentloaded', function () { document.queryselector('main').classname += 'loaded'; }); </script></body></html>
css3代码有点长，都写在一块了，就不贴出来了，详情去github查看
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注！
相关推荐：
关于css3美化表单的控件
通过优先级对比验证css控制样式的三种方式
css3如何实现同时执行倾斜和旋转的动画效果
以上就是关于css3制作的20种loading动效的详细内容。