有趣的css - 移形换位加载动画

大家好，我是 Just，这里是「设计师工作日常」，今天分享的是一个移形换位动态加载小动效，适用于 app 列表加载，页面加载或者图片懒加载等场景。

最新文章通过公众号「设计师工作日常」发布。

整体效果

💎知识点：
1️⃣ transform 形变 rotate(n) 旋转属性
2️⃣ :before 以及 :after 伪元素
3️⃣ animation 动画以及关键帧参数
4️⃣ position 定位

🔑思路：
创建三个矩形元素，通过 animation 动画，让三个矩形元素循环移动到不同的位置上。

适用于 app 列表加载，页面加载或者图片懒加载等场景。

核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。

核心代码

html 代码

<div class="loading65">
  <div class="rectangle65"></div>
</div>

加载动画整体 html 标签布局。

css 部分代码

.loading65{
  position: relative;
  transform: rotate(45deg);
}
.loading65:before,.rectangle65::before,.rectangle65::after{
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid #333333;
  border-radius: 4px;
  box-sizing: border-box;
  position: absolute;
}
.loading65:before{
  top: 0;
  left: 0;
  animation: eff651 4s ease-in-out infinite;
  animation-delay: 0.45s;
}
.rectangle65::before{
  top: 12px;
  left: 0px;
  animation: eff652 4s ease-in-out infinite;
  animation-delay: 0.65s;
}
.rectangle65::after{
  top: 0px;
  left: 12px;
  animation: eff653 4s ease-in-out infinite;
  animation-delay: 0.25s;
}
@keyframes eff651{
  0%,10%{
    top: 0;
    left: 0;
  }
  15%,35%{
    top: 0;
    left: 12px;
  }
  40%,60%{
    top: 12px;
    left: 12px;
  }
  65%,85%{
    top: 12px;
    left: 0;
  }
  90%,100%{
    top: 0;
    left: 0;
  }
}
@keyframes eff652{
  0%,10%{
    top: 12px;
    left: 0;
  }
  15%,35%{
    top: 0;
    left: 0;
  }
  40%,60%{
    top: 0;
    left: 12px;
  }
  65%,85%{
    top: 12px;
    left: 12px;
  }
  90%,100%{
    top: 12px;
    left: 0;
  }
}
@keyframes eff653{
  0%,10%{
    top: 0;
    left: 12px;
  }
  15%,35%{
    top: 12px;
    left: 12px;
  }
  40%,60%{
    top: 12px;
    left: 0;
  }
  65%,85%{
    top: 0;
    left: 0;
  }
  90%,100%{
    top: 0;
    left: 12px;
  }
}

1、分别基于 .loading65 和 .rectangle65 创建伪元素 .loading65:before , .rectangle65::before , .rectangle65::after ，并且分别定义这 3 个伪元素的通用尺寸大小，形成 3 个同样大小的矩形边框。

2、然后通过 position 定位属性，分别调整这 3 个矩形边框的 top 和 left 值，让这 3 个矩形边框元素形成一个小 L 形状。

3、利用 transform 形变 rotate(n) 旋转属性，给整个加载主体 .loading65 旋转 45°，整体形状成向上的简约箭头，更具设计感。

4、分别给这 3 个矩形边框元素，添加 animation 动画，增加关键帧参数，让这 3 个矩形边框元素不停的移形换位；最后分别增加不同的 animation-delay 属性值，让这 3 个矩形边框元素分别延迟播放动画，最终形成视觉上的移形换位且有停顿感。

完整代码如下

html 页面

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
        <title>移形换位加载动画</title>
    </head>
    <body>
        <div class="app">
            <div class="loading65">
                <div class="rectangle65"></div>
            </div>
        </div>
    </body>
</html>

css 样式

/** style.css **/
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading65{
  position: relative;
  transform: rotate(45deg);
}
.loading65:before,.rectangle65::before,.rectangle65::after{
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid #333333;
  border-radius: 4px;
  box-sizing: border-box;
  position: absolute;
}
.loading65:before{
  top: 0;
  left: 0;
  animation: eff651 4s ease-in-out infinite;
  animation-delay: 0.45s;
}
.rectangle65::before{
  top: 12px;
  left: 0px;
  animation: eff652 4s ease-in-out infinite;
  animation-delay: 0.65s;
}
.rectangle65::after{
  top: 0px;
  left: 12px;
  animation: eff653 4s ease-in-out infinite;
  animation-delay: 0.25s;
}
@keyframes eff651{
  0%,10%{
    top: 0;
    left: 0;
  }
  15%,35%{
    top: 0;
    left: 12px;
  }
  40%,60%{
    top: 12px;
    left: 12px;
  }
  65%,85%{
    top: 12px;
    left: 0;
  }
  90%,100%{
    top: 0;
    left: 0;
  }
}
@keyframes eff652{
  0%,10%{
    top: 12px;
    left: 0;
  }
  15%,35%{
    top: 0;
    left: 0;
  }
  40%,60%{
    top: 0;
    left: 12px;
  }
  65%,85%{
    top: 12px;
    left: 12px;
  }
  90%,100%{
    top: 12px;
    left: 0;
  }
}
@keyframes eff653{
  0%,10%{
    top: 0;
    left: 12px;
  }
  15%,35%{
    top: 12px;
    left: 12px;
  }
  40%,60%{
    top: 12px;
    left: 0;
  }
  65%,85%{
    top: 0;
    left: 0;
  }
  90%,100%{
    top: 0;
    left: 12px;
  }
}