用CSS3实现了 几种 常见的Loading效果，虽然很 简单 ，但还是分享一下，顺便也当是做做笔记&helli p; …
第1种效果：
代码如下：
XM L/HT ML Code 复制内容到剪贴板
< div class = "loading" > < span > </ span > < span > </ span > < span > </ span > < span > </ span > < span > </ span > </ div >
CSS Code @H_ 360 _149@复制内容到剪贴板
.loading{ width : 80px ; h ei ght : 40px ; m arg in : 0 auto ; mar gin -t op : 100px ; } .loading span{ dis play : inline - block ; width : 8px ; height : 100%; border -radius: 4px ; background : lightgreen; - webkit -animation: load 1s ease infin IT e; } @-webkit-keyfr am es 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; }
第2种效果：
代码如下：
XML/HTML Code 复制内容到剪贴板
< div class = "loading" > < span > </ span > </ div >
CSS Code 复制内容到剪贴板
.loading{ width : 150px ; height : 4px ; border -radius: 2px ; margin : 0 auto ; margin-top : 100px ; position : relative ; background : lightgreen; -webkit-animation: changeBgColor 1.04s ease -i n infinite alternate; } .loading span{ display : inline - block ; width : 16px ; height : 16px ; border -radius: 50%; background : lightgreen; position : absolute ; margin-top : - 7px ; margin-left :- 8px ; -webkit-animation: changePosition 1.04s ease-in infinite alternate; } @-webkit-keyframes changeBgColor{ 0%{ background : lightgreen; } 100%{ background : lightblue; } } @-webkit-keyframes changePosition{ 0%{ background : lightgreen; } 100%{ margin-left : 142px ; background : lightblue; } }
第3-5种效果：
代码如下：
XML/HTML Code 复制内容到剪贴板
< div class = "loading" > < span > </ span > < span > </ span > < span > </ span > < span > </ span > < span > </ span > </ div >
第3-5种效果的css样式分别为：
CSS Code 复制内容到剪贴板
.loading{ width : 150px ; height : 15px ; margin : 0 auto ; position : relative ; margin-top : 100px ; } .loading span{ position : absolute ; width : 15px ; height : 100%; border -radius: 50%; background : lightgreen; -webkit-animation: load 1.04s ease-in infinite alternate; } @-webkit-keyframes load{ 0%{ opacity: 1; -webkit-transform: translate( 0px ); } 100%{ opacity: 0.2; -webkit-transform: translate( 150px ); } } .loading span:nth-child(1){ -webkit-animation-delay:0.13s; } .loading span:nth-child(2){ -webkit-animation-delay:0.26s; } .loading span:nth-child(3){ -webkit-animation-delay:0.39s; } .loading span:nth-child(4){ -webkit-animation-delay:0.52s; } .loading span:nth-child(5){ -webkit-animation-delay:0.65s; }
第6-8种效果：
代码如下：
XML/HTML Code 复制内容到剪贴板
< div class = "loading" > < span > </ span > < span > </ span > < span > </ span > < span > </ span > < span > </ span > </ div >
第6-8种效果的css样式分别为：
CSS Code 复制内容到剪贴板
.loading{ width : 150px ; height : 15px ; margin : 0 auto ; margin-top : 100px ; text-align : center ; } .loading span{ display : inline - block ; width : 15px ; height : 100%; margin-right : 5px ; background : lightgreen; -webkit-animation: load 1.04s ease infinite; } .loading span:last-child{ margin-right : 0px ; } @-webkit-keyframes load{ 0%{ opacity: 1; } 100%{ opacity: 0; } } .loading span:nth-child(1){ -webkit-animation-delay:0.13s; } .loading span:nth-child(2){ -webkit-animation-delay:0.26s; } .loading span:nth-child(3){ -webkit-animation-delay:0.39s; } .loading span:nth-child(4){ -webkit-animation-delay:0.52s; } .loading span:nth-child(5){ -webkit-animation-delay:0.65s; }
第9-10种效果：
代码如下：
XML/HTML Code 复制内容到剪贴板
< div class = "loadEffect" > < span > </ span > < span > </ span > < span > </ span > < span > </ span > < span > </ span > < span > </ span > < span > </ span > < span > </ span > </ div >
CSS样式分别为：
CSS Code 复制内容到剪贴板
.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 right : 14px ; -webkit-animation-delay:0.52s; } .loadEffect span:nth-child(5){ right right : 0; top : 50%; margin-top :- 8px ; -webkit-animation-delay:0.65s; } .loadEffect span:nth-child(6){ right right : 14px ; bottom bottom : 14px ; -webkit-animation-delay:0.78s; } .loadEffect span:nth-child(7){ bottom bottom : 0; left : 50%; margin-left : - 8px ; -webkit-animation-delay:0.91s; } .loadEffect span:nth-child(8){ bottom bottom : 14px ; left : 14px ; -webkit-animation-delay:1.04s; }
PS：CSS样式代码其实很多重复，主要就是动画不一样，但为了方便以后直接拿来用，就先不整理了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
本文链接： http://HdhCmsTestcnblogs测试数据/jr1993/p/4622039.html
总结
以上是 为你收集整理的 CSS3实现10种Loading效果 全部内容，希望文章能够帮你解决 CSS3实现10种Loading效果 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于CSS3实现10种Loading效果的详细内容...