<div loading 效果是一種常見的網頁加載動畫效果，它可以在頁面加載內容時給用戶一個視覺提示，告訴他們頁面正在加載中。在本文中，我們將介紹一些常見的 div loading 效果代碼案例，并參考一些真實案例進行詳細解釋。

第一種常見的 div loading 效果是旋轉加載動畫。

<code>
.loader {
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 1s linear infinite;
margin: 0 auto;
}
<br>
    @keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</code>

在上述代碼中，我們創建了一個名為 loader 的 div，并設置了一些樣式屬性。其中，border 屬性用于設置邊框的樣式，width 和 height 屬性用于設置 loader 的尺寸。通過 animation 屬性，我們將 spin 動畫應用到 loader 上，使其在 1 秒鐘內按線性方式無限旋轉。最后，我們通過設置 margin 屬性實現居中顯示。

第二種常見的 div loading 效果是跳動加載動畫。

<code>
.loader {
width: 20px;
height: 20px;
background-color: #3498db;
position: relative;
animation: jump 1s infinite;
}
<br>
    @keyframes jump {
50% {
top: -20px;
}
100% {
top: 0;
}
}
</code>

在上述代碼中，我們創建了一個名為 loader 的 div，并設置了一些樣式屬性。其中，width 和 height 屬性用于設置 loader 的尺寸，background-color 屬性用于設置背景色。通過 animation 屬性，我們將 jump 動畫應用到 loader 上，使其在 1 秒鐘內無限循環地向上跳動。通過設置 position:relative 屬性定位為相對位置，top 屬性控制跳動的高度。

第三種常見的 div loading 效果是閃爍加載動畫。

<code>
.loader {
width: 20px;
height: 20px;
background-color: #3498db;
animation: blink 1s infinite;
}
<br>
    @keyframes blink {
0%, 50%, 100% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
</code>

在上述代碼中，我們創建了一個名為 loader 的 div，并設置了一些樣式屬性。其中，width 和 height 屬性用于設置 loader 的尺寸，background-color 屬性用于設置背景色。通過 animation 屬性，我們將 blink 動畫應用到 loader 上，使其在 1 秒鐘內無限循環地閃爍。通過設置 opacity 屬性實現漸變透明效果。

通過以上三個代碼案例，我們可以看到不同的 div loading 效果，它們能夠為用戶提供視覺上的加載提醒。這些效果在實際的網頁設計中都有廣泛應用，并且可以根據具體需求進行樣式和動畫的調整。希望本文能夠幫助讀者更好地理解和應用 div loading 效果。