CSS加載特效指的是在頁面中加載CSS樣式時，為了提升用戶體驗而設(shè)計的一些視覺特效。下面我們將介紹一些常見的CSS加載特效。

1. 加載條特效

.loading-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 5px;
background-color: #eee;
}
.loading-bar::before {
content: "";
display: block;
position: absolute;
height: 5px;
top: 0;
left: 0;
background-color: #f00;
animation: loading 2s ease-in-out infinite;
}
@keyframes loading {
0% {
width: 0%;
left: 0%;
}
50% {
width: 50%;
left: 25%;
}
100% {
width: 100%;
left: 0%;
}
}

2. 旋轉(zhuǎn)動畫特效

.loading-spinner {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
}
.loading-spinner::before {
content: "";
display: block;
width: 50%;
height: 50%;
border-radius: 50%;
border: 3px solid #f00;
border-top-color: transparent;
animation: loading 1s ease infinite;
}
@keyframes loading {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

3. 淡入淡出特效

.loading-fade {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #eee;
opacity: 1;
transition: opacity .5s ease-in-out;
}
.loading-fade.loaded {
opacity: 0;
}

以上就是一些常見的CSS加載特效，希望能對大家有所幫助。