CSS3 中的 loading（載入動畫）是一個非常流行的效果，它可以增加頁面的交互性和美觀性。下面我們就來介紹一下 CSS3 中的 loading 效果。 首先，我們需要在 HTML 中創建一個容器，用于放置我們的 loading 效果。代碼如下：

<div class="loading"></div>

接著，在 CSS 中，我們為該容器設置樣式，并定義 loading 效果。以下是一些常用的 loading 效果樣式： 1.旋轉：可以使用 transform 和 animation 實現旋轉效果。代碼如下：

.loading {
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 2s linear infinite;
-webkit-animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}

2.跳躍：可以使用 transform 和 animation 實現跳躍效果。代碼如下：

.loading {
width: 40px;
height: 40px;
border-radius: 50%;
background: #3498db;
position: relative;
animation: jump 1.5s ease-in-out infinite;
}
@keyframes jump {
0% {
top: 0;
transform: scale(1);
}
50% {
top: -20px;
transform: scale(1.2);
}
100% {
top: 0;
transform: scale(1);
}
}

3.逐漸變化：可以使用 animation 實現逐漸變化的效果。代碼如下：

.loading {
width: 60px;
height: 60px;
background: #3498db;
animation: change 2s ease-in-out infinite;
}
@keyframes change {
0% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.5;
transform: scale(1.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}

總體來說，CSS3 中的 loading 效果非常豐富，我們可以根據自己的需要進行定制。希望上面的介紹能夠對大家有所幫助。