【转】 CSS3实现10种Loading效果

昨晚用CSS3实现了几种常见的Loading效果，虽然很简单，但还是分享一下，顺便也当是做做笔记……

PS:如需转载，请注明出处！

第1种效果：

代码如下：

<div class="loading">    <span></span>    <span></span>    <span></span>    <span></span>    <span></span></div>

<div class="loading">    <span></span>    <span></span>    <span></span>    <span></span>    <span></span></div>

第6-8种效果的css样式分别为：

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

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：【转】 CSS3实现10种Loading效果

关键词：CSS