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

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

接著，在 CSS 中，我們?yōu)樵撊萜髟O(shè)置樣式，并定義 loading 效果。以下是一些常用的 loading 效果樣式： 1.旋轉(zhuǎn)：可以使用 transform 和 animation 實(shí)現(xiàn)旋轉(zhuǎn)效果。代碼如下：

.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 實(shí)現(xiàn)跳躍效果。代碼如下：

.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 實(shí)現(xiàn)逐漸變化的效果。代碼如下：

.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);
}
}

總體來(lái)說(shuō)，CSS3 中的 loading 效果非常豐富，我們可以根據(jù)自己的需要進(jìn)行定制。希望上面的介紹能夠?qū)Υ蠹矣兴鶐椭?/div>