CSS3实现Loading效果的十种方法
第1种效果：
成都创新互联服务项目包括西林网站建设、西林网站制作、西林网页制作以及西林网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，西林网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到西林省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
.jpg)
代码如下：
html
<div class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>css
.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;
}第2种效果
<div class="loading">
<span></span>
</div>.loading{
width: 150px;
height: 4px;
border-radius: 2px;
margin: 0 auto;
margin-top:100px;
position: relative;
background: lightgreen;
-webkit-animation: changeBgColor 1.04s ease-in 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种效果：
.jpg)
.0
<div class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>3
.loading{
width: 150px;
height: 15px;
margin: 0 auto;
margin-top:100px;
}
.loading span{
display: inline-block;
width: 15px;
height: 100%;
margin-right: 5px;
border-radius: 50%;
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;
}4
.loading{
width: 150px;
height: 15px;
margin: 0 auto;
margin-top:100px;
}
.loading span{
display: inline-block;
width: 15px;
height: 100%;
margin-right: 5px;
border-radius: 50%;
background: lightgreen;
-webkit-animation: load 1.04s ease infinite;
}
.loading span:last-child{
margin-right: 0px;
}
@-webkit-keyframes load{
0%{
opacity: 1;
-webkit-transform: scale(1.3);
}
100%{
opacity: 0.2;
-webkit-transform: scale(.3);
}
}
.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;
}5
.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种效果：
.jpg)
<div class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>.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;
}.loading{
width: 150px;
height: 15px;
margin: 0 auto;
margin-top:100px;
}
.loading span{
display: inline-block;
width: 15px;
height: 100%;
margin-right: 5px;
background: lightgreen;
-webkit-transform-origin: right bottom;
-webkit-animation: load 1s ease infinite;
}
.loading span:last-child{
margin-right: 0px;
}
@-webkit-keyframes load{
0%{
opacity: 1;
}
100%{
opacity: 0;
-webkit-transform: rotate(90deg);
}
}
.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;
}.loading{
width: 150px;
height: 15px;
margin: 0 auto;
margin-top:100px;
}
.loading span{
display: inline-block;
width: 15px;
height: 100%;
margin-right: 5px;
background: lightgreen;
-webkit-transform-origin: right bottom;
-webkit-animation: load 1s ease infinite;
}
.loading span:last-child{
margin-right: 0px;
}
@-webkit-keyframes load{
0%{
opacity: 1;
-webkit-transform: scale(1);
}
100%{
opacity: 0;
-webkit-transform: rotate(90deg) scale(.3);
}
}
.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种效果：
.jpg)
<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;
}.loadEffect{
width: 100px;
height: 100px;
position: relative;
margin: 0 auto;
margin-top:100px;
}
.loadEffect span{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background: lightgreen;
position: absolute;
-webkit-animation: load 1.04s ease infinite;
}
@-webkit-keyframes load{
0%{
-webkit-transform: scale(1.2);
opacity: 1;
}
100%{
-webkit-transform: scale(.3);
opacity: 0.5;
}
}
.loadEffect span:nth-child(1){
left: 0;
top: 50%;
margin-top:-10px;
-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: -10px;
-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:-10px;
-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: -10px;
-webkit-animation-delay:0.91s;
}
.loadEffect span:nth-child(8){
bottom: 14px;
left: 14px;
-webkit-animation-delay:1.04s;
}以上就是利用CSS3打造十种Loading效果的详细内容，更多请关注创新互联其它相关文章！
网站名称：CSS3实现Loading效果的十种方法
文章出自：https://www.cdcxhl.com/article8/pjojip.html
成都网站建设公司_创新互联，为您提供定制开发、定制网站、关键词优化、外贸建站、网站制作、响应式网站
声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联
- 外贸网站建设常见的问题有哪些 2013-12-26
- 公司的外贸网站建设应考虑什么因素？ 2022-06-20
- 成都外贸网站建设如何避开缺点做的更加完善？ 2016-03-15
- 佛山外贸网站建设设计网络公司 2022-11-30
- 多语种外贸网站建设方案 2022-07-08
- 外贸网站建设和规范设计解决方案 2022-08-14
- 为什么要进行小语种外贸网站建设？ 2016-02-14
- 外贸网站建设的目的是什么？ 2022-12-07
- 专业的外贸网站建设是怎样的？ 2022-12-04
- 外贸网站建设的战略 2016-03-13
- 外贸网站建设要做到“快、简、直、细、严” 2013-04-28
- 外贸网站建设为什么价格这么贵 2015-12-25