纯CSS3制作超级漂亮又实用的加载小图标
发布时间:2016-10-13 16:00:08
先来一张各种效果的预览图,其实代码并不复杂,关键看自己如何运用。<!doctype html><head><meta charset="utf-8"> <link rel="stylesheet" ...
先来一张各种效果的预览图,其实代码并不复杂,关键看自己如何运用。
<!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制作超级漂亮又实用的加载小图标
关键词:CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。