有趣的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;}
}