至今HTML5中国已经为大家分享过几百种基于CSS3的Loading加载动画,效果酷炫代码简洁,非常值得学习借鉴;今天就先给大家分享两个常用的CSS3的Loading的案例。
HTML部分
<div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
.loading{ width: 80px; height: 40px; margin: 0 auto; margin-top:100px; } .loading span{ display: inline-block; width: 8px; height: 100%; border-radius: 4px; background: lightgreen; -webkit-animation: load 1s ease infinite; } @-webkit-keyframes load{ 0%,100%{ height: 40px; background: lightgreen; } 50%{ height: 70px; margin: -15px 0; background: lightblue; } } .loading span:nth-child(2){ -webkit-animation-delay:0.2s; } .loading span:nth-child(3){ -webkit-animation-delay:0.4s; } .loading span:nth-child(4){ -webkit-animation-delay:0.6s; } .loading span:nth-child(5){ -webkit-animation-delay:0.8s; }
<div class="loadEffect"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
.loadEffect{ width: 100px; height: 100px; position: relative; margin: 0 auto; margin-top:100px; } .loadEffect span{ display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: lightgreen; position: absolute; -webkit-animation: load 1.04s ease infinite; } @-webkit-keyframes load{ 0%{ opacity: 1; } 100%{ opacity: 0.2; } } .loadEffect span:nth-child(1){ left: 0; top: 50%; margin-top:-8px; -webkit-animation-delay:0.13s; } .loadEffect span:nth-child(2){ left: 14px; top: 14px; -webkit-animation-delay:0.26s; } .loadEffect span:nth-child(3){ left: 50%; top: 0; margin-left: -8px; -webkit-animation-delay:0.39s; } .loadEffect span:nth-child(4){ top: 14px; right:14px; -webkit-animation-delay:0.52s; } .loadEffect span:nth-child(5){ right: 0; top: 50%; margin-top:-8px; -webkit-animation-delay:0.65s; } .loadEffect span:nth-child(6){ right: 14px; bottom:14px; -webkit-animation-delay:0.78s; } .loadEffect span:nth-child(7){ bottom: 0; left: 50%; margin-left: -8px; -webkit-animation-delay:0.91s; } .loadEffect span:nth-child(8){ bottom: 14px; left: 14px; -webkit-animation-delay:1.04s; }
上面这两个都是大家常用的加载效果,下面的就不依依的现实代码了,有需要的小伙伴请点击小月博客!
======================================
更多资源请点击: http://www.aliyue.net
=======================================
这些效果都是用CSS3实现的,是不是很厉害,想要学习的小伙伴记得给我留言哦!如果大家有更牛气的效果记得偷偷的发给我哦!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。