在現(xiàn)代網(wǎng)站設(shè)計(jì)中，動(dòng)畫效果已經(jīng)成為了重要的一部分。而CSS Loaders需要在頁(yè)面加載或傳輸過(guò)程中通過(guò)展示動(dòng)畫效果來(lái)提高用戶體驗(yàn)。簡(jiǎn)單地說(shuō)，這種動(dòng)畫效果可以讓用戶知道網(wǎng)站正在進(jìn)行操作或加載，這樣就不會(huì)讓用戶感到失望或迷茫。此外，由于它們只是用CSS實(shí)現(xiàn)，因此它們通常非常輕量級(jí)且易于管理。

.loader {
text-align: center;
font-size: 10px;
position: relative;
margin: 0;
padding: 0;
}
.loader-inner {
display: inline-block;
width: 2.5em;
height: 2.5em;
position: relative;
animation: loader-rotate 2.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.loader-inner:after,
.loader-inner:before {
content: '';
display: block;
position: absolute;
left: -0.25em;
top: -0.25em;
width: 0.5em;
height: 0.5em;
border-radius: 0.25em;
animation: loader-bounce 2.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
background-color: #fff;
}
.loader-inner:after {
animation-delay: -1.1s;
}
@keyframes loader-rotate {
to {transform: rotate(360deg);}
}
@keyframes loader-bounce {
50% {
transform: translateX(1.8em);
animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
}
to {transform: translateX(0);}
}

這是一個(gè)CSS Loader動(dòng)畫的示例代碼。該代碼包含兩個(gè)關(guān)鍵元素：loader和loader-inner。通常，loader這個(gè)容器應(yīng)該放在需要展示動(dòng)畫的地方，在這個(gè)示例中，可以通過(guò)將這個(gè)容器放在網(wǎng)站的頂部來(lái)展示加載動(dòng)畫。除此之外，loader-inner就是動(dòng)畫的實(shí)際元素，這個(gè)元素是實(shí)現(xiàn)整個(gè)動(dòng)畫效果的核心，包含一個(gè)旋轉(zhuǎn)動(dòng)畫和兩個(gè)彈跳動(dòng)畫版塊，最終展示出一種經(jīng)典‘加載-彈跳’的動(dòng)畫效果。