至今HTML5中国已经为大家分享过几百种基于CSS3的Loading加载动画,效果酷炫代码简洁,非常值得学习借鉴;今天就先给大家分享两个常用的CSS3的Loading的案例。
第一种效果:
HTML部分
- <divclass="loading">
- <span></span>
- <span></span>
- <span></span>
- <span></span>
- <span></span>
- </div>
CSS3部分
- .loading{
- width:80px;
- height:40px;
- margin:0auto;
- margin-top:100px;
- }
- .loadingspan{
- display:inline-block;
- width:8px;
- height:100%;
- border-radius:4px;
- background:lightgreen;
- -webkit-animation:load1seaseinfinite;
- }
- @-webkit-keyframesload{
- 0%,100%{
- height:40px;
- background:lightgreen;
- }
- 50%{
- height:70px;
- margin:-15px0;
- background:lightblue;
- }
- }
- .loadingspan:nth-child(2){
- -webkit-animation-delay:0.2s;
- }
- .loadingspan:nth-child(3){
- -webkit-animation-delay:0.4s;
- }
- .loadingspan:nth-child(4){
- -webkit-animation-delay:0.6s;
- }
- .loadingspan:nth-child(5){
- -webkit-animation-delay:0.8s;
- }
第二种效果:
HTML部分
- <divclass="loadEffect">
- <span></span>
- <span></span>
- <span></span>
- <span></span>
- <span></span>
- <span></span>
- <span></span>
- <span></span>
- </div>
CSS3部分
- .loadEffect{
- width:100px;
- height:100px;
- position:relative;
- margin:0auto;
- margin-top:100px;
- }
- .loadEffectspan{
- display:inline-block;
- width:16px;
- height:16px;
- border-radius:50%;
- background:lightgreen;
- position:absolute;
- -webkit-animation:load1.04seaseinfinite;
- }
- @-webkit-keyframesload{
- 0%{
- opacity:1;
- }
- 100%{
- opacity:0.2;
- }
- }
- .loadEffectspan:nth-child(1){
- left:0;
- top:50%;
- margin-top:-8px;
- -webkit-animation-delay:0.13s;
- }
- .loadEffectspan:nth-child(2){
- left:14px;
- top:14px;
- -webkit-animation-delay:0.26s;
- }
- .loadEffectspan:nth-child(3){
- left:50%;
- top:0;
- margin-left:-8px;
- -webkit-animation-delay:0.39s;
- }
- .loadEffectspan:nth-child(4){
- top:14px;
- rightright:14px;
- -webkit-animation-delay:0.52s;
- }
- .loadEffectspan:nth-child(5){
- rightright:0;
- top:50%;
- margin-top:-8px;
- -webkit-animation-delay:0.65s;
- }
- .loadEffectspan:nth-child(6){
- rightright:14px;
- bottombottom:14px;
- -webkit-animation-delay:0.78s;
- }
- .loadEffectspan:nth-child(7){
- bottombottom:0;
- left:50%;
- margin-left:-8px;
- -webkit-animation-delay:0.91s;
- }
- .loadEffectspan:nth-child(8){
- bottombottom:14px;
- left:14px;
- -webkit-animation-delay:1.04s;
- }
上面这两个都是大家常用的加载效果,下面的就不依依的现实代码了,有需要的小伙伴请给我留言!
更多效果如下所示:
第三种loading效果
第四种loading效果
第五种loading效果
第六种loading效果
第七种loading效果
这些效果都是用CSS3实现的,是不是很厉害,想要学习的小伙伴记得给我留言哦!如果大家有更牛气的效果记得偷偷的发给我哦!
以上这篇CSS3轻松实现清新 Loading 效果的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。