CSS练习实现多种loading

Jrain 发布于2019-08-22 11:17 / 3001人阅读

摘要：核心代码传送门核心代码传送门核心代码传送门核心代码传送门参考实现种效果未完待续

One

核心代码:

  .loading{
        width: 70px;
        height: 200px;
        margin: auto;
        display: flex;
    }
    .loading span{
        display: inline-block;
        width: 8px;
        height: 40px;
        border-radius: 4px;
        background: #91d5ff;
        margin: auto;
        -webkit-animation: load 1s ease infinite;
    }
    @-webkit-keyframes load{
        0%,100%{
            height: 40px;
            background: #91d5ff;
        }
        50%{
            height: 80px;
            background: #40a9ff;
        }
    }
    .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;
    }

jsfiddle传送门

Two

核心代码:

.container{
  width:100%;
  height:100%;
  display:flex;
}

.loading{
   width:160px;
   height:8px;
   background:#91d5ff;
   border-radius:4px;
   margin:auto;
   display: flex;
   align-items:center;
   -webkit-animation: load 1.2s ease-in-out infinite alternate;
}         

.loading span{
  display:inline-block;
  width:18px;
  height:18px;
  background:#91d5ff;
  border-radius:9px;
  -webkit-animation: loadSpan 1.2s ease-in-out infinite alternate;
}

@-webkit-keyframes load{
  0%{
      background:#91d5ff;
  }  
  100%{
      background:#69c0ff;
    }
}

@-webkit-keyframes loadSpan{
  0%{
      background:#91d5ff;
  }  
  100%{
      margin-left:142px;
      background:#69c0ff;
    }
}

jsfiddle传送门

Three

核心代码:

.container{
  width:100%;
  height:100%;
  display:flex;
}

.loading{
   width:160px;
   height:80px;
   margin:auto;
   display: flex;
}         

.loading span{
  display:inline-block;
  width:18px;
  height:18px;
  background:#91d5ff;
  border-radius:9px;
  margin:auto;
  -webkit-animation: loadSpan 1s ease infinite;
}

@-webkit-keyframes loadSpan{
  0%{
      opacity：1;
  }  
  100%{
      opacity:0;
    }
}

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

jsfiddle传送门

Four

核心代码:

.container{
  width:100%;
  height:100%;
  display:flex;
}

.loading{
   width:160px;
   height:80px;
   margin:auto;
   display: flex;
}         

.loading span{
  display:inline-block;
  width:18px;
  height:18px;
  background:#91d5ff;
  border-radius:9px;
  margin:auto;
  -webkit-animation: loadSpan 1.2s ease infinite;
}

@-webkit-keyframes loadSpan{
  0%{
      opacity：1;
  }  
  100%{
      opacity:0;
      -webkit-transform: scale(0.3);
    }
}

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

jsfiddle传送门

ps:参考CSS3实现18种Loading效果

未完待续

GPU云服务器云服务器 css练习 html和css练习 css3loadding JS轻松实现CSS设置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92115.html

CSS练习实现多种loading

摘要：核心代码传送门核心代码传送门核心代码传送门核心代码传送门参考实现种效果未完待续 One showImg(https://segmentfault.com/img/bV0fDv?w=294&h=242); 核心代码: .loading{ width: 70px; height: 200px; margin: auto; ...

Lavender 2019-08-29 14:00 评论0 收藏0
前端实例练习 - 加载动效按钮

摘要：加载动效按钮代码储存在效果预览初衷很多人在初学前端的时候都会问，如何入门前端同为在前端学习道路上，奋力追赶的一员，本人对于目前网络上所能看到的入门级的教材并不太满意。在这里本人整理了目前页面上常见功能实现的具体实例。加载动效按钮代码储存在Github效果预览初衷：很多人在初学前端的时候都会问，如何入门前端？同为在前端学习道路上，奋力追赶的一员，本人对于目前网络上所能看到的入门级...

SmallBoyO 2019-08-21 11:37 评论0 收藏0
前端实例练习 - 加载动效按钮

摘要：加载动效按钮代码储存在效果预览初衷很多人在初学前端的时候都会问，如何入门前端同为在前端学习道路上，奋力追赶的一员，本人对于目前网络上所能看到的入门级的教材并不太满意。在这里本人整理了目前页面上常见功能实现的具体实例。加载动效按钮代码储存在Github效果预览初衷：很多人在初学前端的时候都会问，如何入门前端？同为在前端学习道路上，奋力追赶的一员，本人对于目前网络上所能看到的入门级...

Aomine 2019-08-29 12:11 评论0 收藏0
前端实例练习 - 加载动效按钮

摘要：加载动效按钮代码储存在效果预览初衷很多人在初学前端的时候都会问，如何入门前端同为在前端学习道路上，奋力追赶的一员，本人对于目前网络上所能看到的入门级的教材并不太满意。在这里本人整理了目前页面上常见功能实现的具体实例。加载动效按钮代码储存在Github效果预览初衷：很多人在初学前端的时候都会问，如何入门前端？同为在前端学习道路上，奋力追赶的一员，本人对于目前网络上所能看到的入门级...

EsgynChina 2019-08-01 16:28 评论0 收藏0
现代后端开发者必备技能-2018版

摘要：现在开始创建一个包并分发给其他人使用，并确保遵循你迄今为止学到的标准和最佳实践。第步实践对于练习，继续编写单元测试，以完成目前为止所做的实际任务，特别是你在步骤中所做的练习。今天的Web开发与几年前完全不同，有很多不同的东西可以很容易地阻止任何人进入Web开发。这是我们决定制作这些循序渐进的视觉指南的原因之一，这些指南展示了更大的图景，并让任何人清楚了解他们在网页开发中扮演的角色。 ...

eternalshallow 2019-07-01 12:27 评论0 收藏0