CSS（層疊樣式表）是網頁設計中的必要技術之一，能夠為HTML網頁增加樣式和布局，使其更加美觀和易于閱讀。而CSS加載特效代碼則是在加載網頁時，為頁面添加動畫效果，讓用戶體驗更加出色。下面我們來看一些CSS加載特效代碼。

.loading {
height: 50px;
width: 50px;
border: 5px solid rgba(0, 0, 0, 0.2);
border-radius: 50%;
border-top-color: #3498db;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}

這段代碼能夠創建一個圓形的加載圖標，其外觀會在1秒內旋轉一周，一直重復該動畫。使用時只需將相應的HTML元素賦予類名 “.loading” 即可。

.loader {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.loader div {
position: absolute;
top: 33px;
width: 13px;
height: 13px;
border-radius: 50%;
background: #fff;
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.loader div:nth-child(1) {
left: 8px;
animation: lds-ellipsis1 0.6s infinite;
}
.loader div:nth-child(2) {
left: 8px;
animation: lds-ellipsis2 0.6s infinite;
}
.loader div:nth-child(3) {
left: 32px;
animation: lds-ellipsis2 0.6s infinite;
}
.loader div:nth-child(4) {
left: 56px;
animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes lds-ellipsis3 {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes lds-ellipsis2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(24px, 0);
}
}

這段代碼能夠創建一個由四個圓點組成的加載動畫。使用時將該代碼塊嵌入到HTML中，并為相應的HTML元素賦予類名 “.loader” 即可。

這些CSS加載特效代碼能夠使頁面更加精彩，提升用戶體驗，是Web設計常用的范例之一。使用時應當根據需要進行定制化處理，以達到最佳的效果。