CSS3是一種用于網頁設計的新一代樣式語言，它可以為網頁帶來更加炫酷的加載動畫效果。在本文中，我們將介紹一些常見的CSS3加載動畫效果。

/* CSS3加載動畫效果樣式 */
/* 方塊旋轉 */
@keyframes squareSpin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.square-spin {
width: 50px;
height: 50px;
background-color: #2ecc71;
animation: squareSpin 1s infinite linear;
}
/* 圓形旋轉 */
@keyframes circleSpin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.circle-spin {
width: 50px;
height: 50px;
background-color: #3498db;
border-radius: 50%;
animation: circleSpin 1s infinite linear;
}
/* 線條跳動 */
@keyframes lineJump {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0);
}
}
.line-jump {
width: 50px;
height: 50px;
background-color: #9b59b6;
display: inline-block;
animation: lineJump 1s infinite ease-in-out;
}

上述代碼中，我們定義了三種不同的加載動畫效果：方塊旋轉、圓形旋轉和線條跳動。它們都使用了CSS3的@keyframes關鍵字定義動畫效果，同時利用animation屬性指定動畫的播放方式。

通過在網頁中引用這些CSS樣式，我們就可以輕松地實現這些炫酷的加載動畫效果了。