CSS练习实现多种loading

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

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

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

零基础入门│带你理解Kubernetes

摘要：的核心是以容器为中心的管理环境。命名空间提供了名称范围。换句话说，确保或同类组始终可用。用于管理有状态应用程序，它管理一组的部署和扩展，并提供有关这些的排序和唯一性的保证。条分缕析带你充分理解Kubernetes的各个细节与部分：它是什么，它如何解决容器编排问题，它包含哪些你必须掌握的关键对象，以及如何快速上手部署使用Kubernetes。 showImg(https://segme...

DevWiki 2019-07-01 16:49 评论0 收藏0
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
重温2018上海Kubernetes贡献者峰会

摘要：作者红帽中兴通讯上海站新贡献者峰会与会者，摄影最近，在中国的首次上，我们完成了在中国的首次新贡献者峰会。这场圆桌讨论旨在让新的和现有的贡献者了解一些最活跃的贡献者和维护者的幕后日常工作，不论他们来自中国还是世界各地。作者: Josh Berkus (红帽), Yang Li (The Plant), Puja Abbassi (Giant Swarm), XiangPeng Zhao...

Kylin_Mountain 2019-07-01 17:37 评论0 收藏0
重温2018上海Kubernetes贡献者峰会

摘要：作者红帽中兴通讯上海站新贡献者峰会与会者，摄影最近，在中国的首次上，我们完成了在中国的首次新贡献者峰会。这场圆桌讨论旨在让新的和现有的贡献者了解一些最活跃的贡献者和维护者的幕后日常工作，不论他们来自中国还是世界各地。作者: Josh Berkus (红帽), Yang Li (The Plant), Puja Abbassi (Giant Swarm), XiangPeng Zhao...

hzc 2019-07-01 17:10 评论0 收藏0
使用Kubernetes你需要知道的硬道理

摘要：是谷歌内部为解决这个问题所做的工作的产物，它为管理容器如何在整个集群中运行提供了一个单一的框架。在云中使用服务在许多云中作为标准问题项提供，尽管它在谷歌云平台，中最突出地表现为本地特性。使用，运行控制平面，将重点部署将用于所需配置的容器。每一项创新都会带来新的复杂性。容器使以一种方便的、可移植的形式打包和运行应用程序成为可能，但至少要说以规模管理容器是一个挑战。Kubernetes是谷歌内部...

fyber 2019-04-29 19:31 评论0 收藏0