CSS3轻松实现清新 Loading 效果的简单实例

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

第一种效果：

HTML部分

XML/HTML Code复制内容到剪贴板

<divclass="loading">

</div>

CSS3部分

CSS Code复制内容到剪贴板

.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部分

XML/HTML Code复制内容到剪贴板

<divclass="loadEffect">

</div>

CSS3部分

CSS Code复制内容到剪贴板

.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 效果的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

相关文章

最新文章

热门文章

猜你喜欢