一些网站或者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>
- <div class="loaders">
- <div class="loader">
- <div class="loader-inner ball-pulse">
- <div></div>
- <div></div>
- <div></div>
- </div>
- </div>
- <div class="loader">
- <div class="loader-inner ball-grid-pulse">
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- </div>
- </div>
- <div class="loader">
- <div class="loader-inner ball-clip-rotate">
- <div></div>
- </div>
- </div>
- <div class="loader">
- <div class="loader-inner ball-clip-rotate-pulse">
- <div></div>
- <div></div>
- </div>
- </div>
- <div class="loader">
- <div class="loader-inner square-spin">
- <div></div>
- </div>
- </div>
- <div class="loader">
- <div class="loader-inner ball-clip-rotate-multiple">
- <div></div>
- <div></div>
- </div>
- </div>
- <div class="loader">
- <div class="loader-inner ball-pulse-rise">
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- </div>
- </div>
- <div class="loader">
- <div class="loader-inner ball-rotate">
- <div></div>
- </div>
- </div>
- <div class="loader">
- <div class="loader-inner cube-transition">
- <div></div>
- <div></div>
- </div>
- </div>
- <div class="loader">
- <div class="loader-inner ball-zig-zag">
- <div></div>
- <div></div>
- </div>
- </div>
- <div class="loader">
- <div class="loader-inner ball-zig-zag-deflect">
- <div></div>
- <div></div>
- </div>
- </div>
- <div class="loader">
- <div class="loader-inner ball-triangle-path">
- <div></div>
- <div></div>
- <div></div>
- </div>
- </div>
- <div class="loader">
- <div class="loader-inner ball-scale">
- <div></div>
- </div>
- </div>
- <div class="loader">
- <div class="loader-inner line-scale">
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- </div>
- </div>
- <div class="loader">
- <div class="loader-inner line-scale-party">
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- </div>
- </div>
- <div class="loader">
- <div class="loader-inner ball-scale-multiple">
- <div></div>
- <div></div>
- <div></div>
- </div>
- </div>
- <div class="loader">
- <div class="loader-inner ball-pulse-sync">
- <div></div>
- <div></div>
- <div></div>
- </div>
- </div>
- <div class="loader">
- <div class="loader-inner ball-beat">
- <div></div>
- <div></div>
- <div></div>
- </div>
- </div>
- <div class="loader">
- <div class="loader-inner line-scale-pulse-out">
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- </div>
- </div>
- <div class="loader">
- <div class="loader-inner line-scale-pulse-out-rapid">
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- </div>
- </div>
- <div class="loader">
- <div class="loader-inner ball-scale-ripple">
- <div></div>
- </div>
- </div>
- <div class="loader">
- <div class="loader-inner ball-scale-ripple-multiple">
- <div></div>
- <div></div>
- <div></div>
- </div>
- </div>
- <div class="loader">
- <div class="loader-inner ball-spin-fade-loader">
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- </div>
- </div>
- <div class="loader">
- <div class="loader-inner line-spin-fade-loader">
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- </div>
- </div>
- <div class="loader">
- <div class="loader-inner triangle-skew-spin">
- <div></div>
- </div>
- </div>
- <div class="loader">
- <div class="loader-inner pacman">
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- </div>
- </div>
- <div class="loader">
- <div class="loader-inner ball-grid-beat">
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- </div>
- </div>
- <div class="loader">
- <div class="loader-inner semi-circle-spin">
- <div></div>
- </div>
- </div>
- </div>
- </main>
- <script>
- document.addEventListener('DOMContentLoaded', function () {
- document.querySelector('main').className += 'loaded';
- });
- </script>
- </body>
- </html>
css3代码有点长,都写在一块了,就不贴出来了,详情去github查看
标签: loading
赏
版权声明:本站所有图片/内容除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!