大家好，我是 Just，這里是「設計師工作日常」，今天分享的是一款小清新的加載動畫，適用于 app 列表加載，頁面加載或者彈層內容延遲加載等場景。
最新文章通過公眾號「設計師工作日常」發布。
目錄
- 整體效果
- 核心代碼
- html 代碼
- css 部分代碼
- 完整代碼如下
- html 頁面
- css 樣式
- 頁面渲染效果
整體效果
知識點：
1??:nth-child選擇器
2?? 混合模式mix-blend-mode
3??filter濾鏡
4??animation動畫
思路：創建兩個圓形，調整混合模式，開啟濾鏡，然后設置動畫屬性讓兩個圓形移動起來。
適用于 app 列表加載，頁面加載或者彈層內容延遲加載等場景。
核心代碼部分，簡要說明了寫法思路；完整代碼在最后，可直接復制到本地運行。
核心代碼
html 代碼
<div class="loading64"><div class="circle64"></div><div class="circle64"></div>
</div>
整體一個
div標簽包裹，然后兩個子div作為兩個圓形元素。
css 部分代碼
.loading64{width: 100px;height: 60px;position: relative;display: flex;justify-content: center;align-items: center;
}
.circle64{width: 24px;height: 24px;border-radius: 50%;position: absolute;animation: eff64 2s ease-in-out infinite;mix-blend-mode: darken; /*混合模式*/filter: blur(2px); /*模糊濾鏡*/
}
.circle64:nth-child(1){background-color: #00FFFF;
}
.circle64:nth-child(2) {background-color: #FFFF00;animation-delay: 1s;
}
@keyframes eff64{0%, 50%, 100% {transform: translateX(0)}25% {transform: translateX(70%)}75% {transform: translateX(-70%)}
}
1、定義加載整體
.loading64的基本樣式，設置display: flex布局，讓子元素平行垂直居中。
2、子標簽圓形元素
.circle64，定義其樣式大小，設置animation動畫，并且開啟混合模式mix-blend-mode，增加模糊濾鏡filter: blur(...)。
3、通過
:nth-child選擇器，分別給兩個圓形設置不同的背景顏色，并且給第二個圓形元素設置動畫延遲播放animation-delay: 1s，讓第二個圓形元素動畫延遲 1 秒播放。
4、給第 2 步中的
animation動畫增加關鍵幀，讓兩個圓形元素在合并、分開時有停頓感，增強整個加載的運動感。
提示： 混合模式 mix-blend-mode 有多個值，感興趣的可以試試其它值，如果同時使用多個值，可以使用英文逗號隔開。
mix-blend-mode: normal; /* 默認值 */
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken; /* 本文中使用的 darken 值， */
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;
完整代碼如下
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="loading64"><div class="circle64"></div><div class="circle64"></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;
}
.loading64{width: 100px;height: 60px;position: relative;display: flex;justify-content: center;align-items: center;
}
.circle64{width: 24px;height: 24px;border-radius: 50%;position: absolute;animation: eff64 2s ease-in-out infinite;mix-blend-mode: darken;filter: blur(2px);
}
.circle64:nth-child(1){background-color: #00FFFF;
}
.circle64:nth-child(2) {background-color: #FFFF00;animation-delay: 1s;
}
@keyframes eff64{0%, 50%, 100% {transform: translateX(0)}25% {transform: translateX(70%)}75% {transform: translateX(-70%)}
}
頁面渲染效果
以上就是所有代碼，以及簡單的思路，希望對你有一些幫助或者啟發。
[1] 原文閱讀
CSS 是一種很酷很有趣的計算機語言，在這里跟大家分享一些 CSS 實例 Demo，為學習者獲取靈感和思路提供一點幫助，希望你們喜歡。
我是 Just，這里是「設計師工作日常」，求點贊求關注！
