你的位置:首页 > 网页设计

[网页设计]CSS3轻松实现清新 Loading 效果


至今HTML5中国已经为大家分享过几百种基于 CSS3 的Loading加载动画,效果酷炫代码简洁,非常值得学习借鉴;今天就先给大家分享两个常用的CSS3的Loading的案例。

第一种效果:

loading01

HTML部分

1 <div class="loading">2   <span></span>3   <span></span>4   <span></span>5   <span></span>6   <span></span>7 </div>

 

CSS3部分

.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; }

 

第二种效果:

loading02

HTML部分

<div class="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: 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; }

 

上面这两个都是大家常用的加载效果,下面的就不依依的现实代码了,有需要的小伙伴请给我留言!

更多效果如下所示:

第三种loading效果

第三种loading效果


第四种loading效果

第四种loading效果


第五种loading效果

第五种loading效果


第六种loading效果

第六种loading效果


第七种loading效果

第七种loading效果


 

这些效果都是用CSS3实现的,是不是很厉害,想要学习的小伙伴记得给我留言哦!如果大家有更牛气的效果记得偷偷的发给我哦!

有问题请点击: 小月博客  联系我哦!