CSS加載動(dòng)畫(huà)是一種很流行的展示頁(yè)面加載狀態(tài)的方式。在用戶(hù)等待頁(yè)面完成加載的過(guò)程中，這些動(dòng)畫(huà)讓用戶(hù)感到頁(yè)面正在處理，避免了用戶(hù)的猜測(cè)和猜想。

.loading {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.lds-dual-ring {
display: inline-block;
width: 64px;
height: 64px;
}
.lds-dual-ring:before {
content: "";
display: block;
width: 46px;
height: 46px;
margin: 1px;
border-radius: 50%;
border: 5px solid #fff;
border-color: #fff transparent #fff transparent;
animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

上面的代碼是使用CSS創(chuàng)建一個(gè)雙環(huán)動(dòng)畫(huà)的例子。這個(gè)動(dòng)畫(huà)使用了偽元素和關(guān)鍵幀動(dòng)畫(huà)，為頁(yè)面加載狀態(tài)增加了良好的視覺(jué)效果。

除了雙環(huán)動(dòng)畫(huà)，我們還可以使用旋轉(zhuǎn)動(dòng)畫(huà)、跳躍動(dòng)畫(huà)等等來(lái)展示不同的頁(yè)面加載狀態(tài)。

.loading {
position: relative;
width: 80px;
height: 80px;
margin: 100px auto;
}
.loading .ldio {
position: absolute;
width: 40px;
height: 40px;
top: 20px;
left: 20px;
}
.loading .ldio div {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
animation: loading 1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
}
.loading .ldio div:nth-child(2) {
animation-delay: -0.5s;
}
@keyframes loading {
0% {
transform: scale(1);
}
20% {
transform: scale(1, 2.5);
}
40% {
transform: scale(1);
}
}

這是一個(gè)使用CSS實(shí)現(xiàn)的跳躍加載動(dòng)畫(huà)。動(dòng)畫(huà)中的形狀由圓形組成，而且跳躍幅度也有很好的節(jié)奏感。這種動(dòng)畫(huà)處理方式可以表示等待的時(shí)間段將要結(jié)束，引起用戶(hù)的好奇心和期待感。

總之，CSS加載動(dòng)畫(huà)的設(shè)計(jì)旨在增加頁(yè)面的交互性和可適應(yīng)性，同時(shí)為用戶(hù)提供更好的體驗(yàn)。