纯css实现呼吸loading效果

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第23天，点击查看活动详情

前言

loading加载是一个系统内常见的基础组件，我们已经见过了太多太多loading加载的动画了，这不是，今天，再来学一个loading加载动画的制作，动画采用纯css3完成，感兴趣的可以点赞收藏哟

需要用到的css属性预告

• flex 依然是经典的flex，最近迷上了通过flex布局来实现水平垂直居中。。。
• box-shadow 阴影，记得我之前的文章里提过，box-shadow是支持分别定义上右下左四边的阴影的
• animation 动画， 我们实现加载动画的关键
• transform 变换，我们实现加载效果的必要属性
• filter 滤镜， 想要实现呼吸灯式的加载动画，hue-rotate滤镜当然必不可少
• css变量 变量， 变量是我们实现动画延迟的关键

核心实现

• 布局 采用flex

实现容器水平垂直居中效果,容器本身也声明flex布局，让里面的元素水平排列

html,body{
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #eaeef0;
  }
  .box{
    display: flex;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

<div class="box">
</div>

• css变量

我们可以通过--的方式来声明css里可以使用的变量，在css内通过var函数进行使用,这里我们的变量是--t，在稍后，你就能明白这个变量所起的作用了，--t恰好标识了每个元素在整个容器内的下标索引

<div class="box">
   <div style="--t:0"></div>
   <div style="--t:1"></div>
   <div style="--t:2"></div>
   <div style="--t:3"></div>
   <div style="--t:4"></div>
   <div style="--t:5"></div>
   <div style="--t:6"></div>
   <div style="--t:7"></div>
  </div>

• 浮雕效果的loading元素实现

通过指定四个方向的阴影效果，我们可以模拟立体浮雕的效果

position: relative;
width: 50px;
height: 50px;
background: #eaeef0;
border: 6px solid #eaeef0;
margin: 0 10px;
border-radius: 50%;
box-shadow: -8px 8px 15px rgba(255,255,255,1),
  8px 8px 15px rgba(0,0,0,.2),
  inset 3px 3px 5px rgba(0,0,0,.1),
  inset -1px -1px 5px rgba(255,255,255,1);

下面就是立体浮雕的效果

• 通过before伪元素，实现loading动画效果

借助hue-rotate滤镜实现的变色动画，通过transform:scale 来模拟显示隐藏 结合声明的css变量实现延迟，来实现我们的loading动画效果

tips calc结合var变量，我们轻松可以实现动态的css效果，当然我们还有其他很多种方式来实现，比如，不同的类名，通过nth-child伪类选择器等等，我们都可以轻松实现现在的效果，但是相比较来说，还是变量的方式需要用到的代码最少，而且实现更为优雅

.box>div::before{
    content: '';
    position: absolute;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: #5c89ff;
    border-radius: 50%;
    box-shadow: inset 3px 3px 5px rgba(0,0,0,.1),
    inset -1px -1px 5px rgba(255,255,255,1);
    transform: scale(0);
    animation: hue-rotate 5s linear infinite, stepAnimate 3.5s linear infinite ;
    animation-delay: calc(var(--t) * .2s);
  }
  @keyframes hue-rotate {
    from{
      filter: hue-rotate(0deg);
    }
    to{
      filter: hue-rotate(360deg);
    }
  }
  @keyframes stepAnimate {
    0%,9.99%,70.0001%{
      transform: scale(0);
    }
    10%,70%{
      transform: scale(1);
    }
  }

下面就是实现完的效果

码上掘金

老规矩 通过码上掘金进行展示