CSS是前端開發者的必備技能之一，它可以讓我們設計出像夜空繁星般美麗的網頁。其中，CSS動畫也是網頁設計中不可或缺的一部分。好看的加載動畫能讓用戶在等待頁面加載時感到愉悅，退出本網頁的概率也會降低。下面將介紹幾種好看的CSS加載動畫。

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

上面的代碼顯示一個簡單的四點動畫加載。動畫中心右側有一個未填充的點，它會在三個填充點之間循環運動。

.loading {
height: 36px;
width: 80px;
text-align: center;
font-size: 10px;
}
.loading >div {
height: 100%;
width: 8px;
margin-right: 4px;
display: inline-block;
animation: loading 1.2s infinite;
}
.loading .bar1 {
background-color: #3498db;
}
.loading .bar2 {
background-color: #e74c3c;
animation-delay: -1.1s;
}
.loading .bar3 {
background-color: #f1c40f;
animation-delay: -1s;
}
.loading .bar4 {
background-color: #2ecc71;
animation-delay: -0.9s;
}
@keyframes loading {
0%, 100% {
transform: scale(0);
}
50% {
transform: scale(1);
}
}

此代碼使用了一個有趣的巧思，動態地填充色塊。每個塊都有不同的顏色和動畫延遲，它們以定時循環方式使您的加載狀態顯得更加逼真和動態。

總之，CSS加載動畫不僅為用戶帶來了愉悅的加載體驗，而且也為開發人員提供了顯示加載過程的簡單方法。使用上面的代碼，開發人員可以自己制作出令人愉悅的加載體驗。