CSS是一種使網頁具有視覺吸引力的語言。除了構建網頁布局和樣式外，還可以為網頁添加動態和交互性。其中一個關鍵方面是加載效果，在用戶等待網頁加載時，引人注目的加載動畫可以提高用戶體驗。

以下是一些CSS加載效果的示例，你可以使用它們作為靈感來創建自己的動畫效果。

/* 進度條 */
.loader {
width: 100%;
height: 4px;
position: relative;
overflow: hidden;
background-color: #ddd;
}
.loader:before {
content: '';
display: block;
position: absolute;
left: -200px;
width: 200px;
height: 4px;
background-color: #87CEEB;
animation: loading 2s linear infinite;
}
@keyframes loading {
from {
left: -200px;
width: 30%;
}
50% {
width: 30%;
}
70% {
width: 70%;
}
80% {
left: 50%;
}
95% {
left: 120%;
}
to {
left: 100%;
}
}
/* 閃爍的點 */
.loading-dots {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #87CEEB;
margin-right: 10px;
animation: loading-dots 0.7s infinite alternate;
}
.dot:last-child {
margin-right: 0;
}
@keyframes loading-dots {
to {
transform: translateX(20px);
}
}
/* 陰影 */
.loading-shadow {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.spinner {
width: 50px;
height: 50px;
border-radius: 50%;
border: 5px solid #eee;
border-top-color: #87CEEB;
animation: loading-shadow 1s linear infinite;
box-shadow: 0px 0px 0px 5px #eee;
}
@keyframes loading-shadow {
to {
transform: rotate(360deg);
}
from {
box-shadow: 0px 0px 0px 5px #eee;
}
to {
box-shadow: 0px 0px 0px 15px #87CEEB;
}
}

在這里，我們展示了三個加載效果，分別是進度條、閃爍的點和陰影。這些效果可以自定義顏色和尺寸，以適應不同的網頁。

使用CSS實現這些加載效果并不需要很高級的技能。我們可以使用偽元素、動畫和過渡等CSS屬性來實現這些效果，讓網頁更加吸引人。