大家好，我是 Just，這里是「設計師工作日常」，今天分享的是一個移形換位動態加載小動效，適用于 app 列表加載，頁面加載或者圖片懶加載等場景。
最新文章通過公眾號「設計師工作日常」發布。
目錄
- 整體效果
- 核心代碼
- html 代碼
- css 部分代碼
- 完整代碼如下
- html 頁面
- css 樣式
- 頁面渲染效果
整體效果
💎知識點：
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;}
}
頁面渲染效果
以上就是所有代碼，以及簡單的思路，希望對你有一些幫助或者啟發。
[1] 原文閱讀
CSS 是一種很酷很有趣的計算機語言，在這里跟大家分享一些 CSS 實例 Demo，為學習者獲取靈感和思路提供一點幫助，希望你們喜歡。
我是 Just，這里是「設計師工作日常」，求點贊求關注！
)
)
