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

时间：2021-05-08

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

第一种效果：

HTML部分

XML/HTML Code复制内容到剪贴板
  • <divclass="loading">
  • <span></span>
  • <span></span>
  • <span></span>
  • <span></span>
  • <span></span>
  • </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">
  • <span></span>
  • <span></span>
  • <span></span>
  • <span></span>
  • <span></span>
  • <span></span>
  • <span></span>
  • <span></span>
  • </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 效果的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章