纯css3实现的一个loading加载动画

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

前言

最近在做骨架屏及首屏渲染优化相关的内容，所以研究了下加载loading的实现，本文尝试以纯css的方式实现一个loading效果

需要使用的css属性预告

• flex 亘古不变 布局首选的flex
• filter url() 滤镜,以链接的形式引入一个滤镜，本文以css的方式进行
• filter blur() 高斯模糊 毛玻璃特效的必备滤镜
• animation 实现动画
• var 变量 实现针对元素的定义，

核心实现

• 布局

布局我们采用经典的flex布局方式

 html,body{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(#28f, #03a);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .heart{
    width: 300px;
    height: 400px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: sketch 1s infinite;
  }
  <div class="heart">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

• 绘制一个心形的图案，由不同高度和位置的div来构成 这里我们用了下css变量函数var,其实不用函数也可以，只是要写的单词明显会多一些,注意这里，我们采用了三个变量分别记录 高度 top值 颜色， 如果不用变量，那我们通过nth-child伪类选择器一样可以实现针对背景色，高度，top值的定义

.heart>div{
    --h: 50%;
    --t: 25%;
    --c: lightblue;
    width: 30px;
    border-radius: 25px;
    background-color: var(--c);
    position: relative;
    height: var(--h);
    top: var(--t);
    animation: jump 1s infinite;
  }
  .heart>div:nth-child(1), .heart>div:nth-child(9) {
    --c: orangered;
    --h: 30%;
    --t: 10%;
  }
  .heart>div:nth-child(2), .heart>div:nth-child(8) {
    --c: gold;
    --h: 40%;
    --t: 20%;
  }
  .heart>div:nth-child(3), .heart>div:nth-child(7) {
    --c: limegreen; 
    --h: 50%;
    --t: 20%;
  }
  .heart>div:nth-child(4), .heart>div:nth-child(6) {
    --c: dodgerblue; 
    --h: 60%;
    --t:30%;
  }
  .heart>div:nth-child(5) {
    --h: 70%;
    --t: 40%;
    --

• 添加加载动画效果

动画效果为 等高的div变成心形，然后更新颜色，周而复始, 这里采用了高斯模糊滤镜来实现一个模糊的效果

 @keyframes jump {
    0%, 30% {
      height: var(--h);
      top: var(--t);
      background: var(--c);
      filter: blur(0);
    }
    60%, 70%{
      height: 50%;
      top: 25%;
      background: lightblue;
      filter: blur(5px);
    }
  }

• 添加一个信号不是很好的光影效果

这里采用的是svg滤镜的方式，我们滤镜支持传入一个url地址，这里我们通过声明svg Filter的Id来实现引用,注意 引入的fliter id 是sketch, 我们给heart添加skecth动画,节奏与之前的元素跳动节奏一致

 <svg width="0" height="0"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <filter id="sketch">
    <feTurbulence type="fractalNoise" baseFrequency=".05 .5" numOctaves="3" result="noise1"></feTurbulence>
    <feColorMatrix in="noise1" type="hueRotate" values="0" result="noise2">
      <animate attributeName="values" from="0" to="360" dur="1.5s" repeatCount="indefinite">
    </feColorMatrix>
    <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="60" in="SourceGraphic" in2="noise2" />
  </filter>
  
  @keyframes sketch {
    0%, 30% {
      filter: blur(0);
    }
    60%, 70%{
      filter: url(#sketch);
    }

  }

码上掘金

老规矩