500 多個純 CSS 實現的 Loading 效果，炫酷！
作者：CUGGZ
使用 clip-path? 屬性定義一個多邊形裁剪路徑，形狀是一個從左上角到右下角的三角形。然后，使用動畫關鍵幀@keyframes定義了一個名為"l2"的動畫，在動畫的關鍵幀定義中，根據時間的百分比，通過不斷改變clip-path屬性的值來實現裁剪路徑的變化。
今天來分享國外 CSS 大佬使用純 CSS 制作的 580 多個 Loading 效果。網址：https://css-loaders.com/
這些與效果的 HTML 結構都很簡單，只需一行：
<div class="loader"></div>想要哪個效果，直接點擊就可以復制其 CSS 代碼，例如：
/* HTML: <div class="loader"></div> */
.loader {
width: 40px;
aspect-ratio: 1;
background: #25b09b;
clip-path: polygon(0 0,100% 0,100% 100%);
animation: l2 2s infinite cubic-bezier(0.3,1,0,1);
}
@keyframes l2 {
25% {clip-path: polygon(0 0,100% 0 ,0 100%)}
50% {clip-path: polygon(0 0,100% 100%,0 100%)}
75% {clip-path: polygon(100% 0,100% 100%,0 100%)}
100% {clip-path: polygon(100% 0,100% 100%,0 0 )}
}這里使用 clip-path 屬性定義一個多邊形裁剪路徑，形狀是一個從左上角到右下角的三角形。然后，使用動畫關鍵幀@keyframes定義了一個名為"l2"的動畫，在動畫的關鍵幀定義中，根據時間的百分比，通過不斷改變clip-path屬性的值來實現裁剪路徑的變化：
- 25%時，裁剪路徑為從左上角到右下角的直線
- 50%時，裁剪路徑為從左上角到右下角的對角線
- 75%時，裁剪路徑為從右上角到右下角的直線
- 100%時，裁剪路徑為從右上角到右下角的對角線
這樣就實現了一個簡單的 Loading 效果。
我們不僅可以直接使用這些 Loading 效果，還可以通過這些 Loading 效果的 CSS 代碼來學習 CSS。
責任編輯：武曉燕
來源：
前端充電寶
