在網(wǎng)頁(yè)開(kāi)發(fā)中，CSS加載動(dòng)畫(huà)是一種常用的技術(shù)，可以讓頁(yè)面更加的生動(dòng)活潑，給用戶帶來(lái)良好的體驗(yàn)。

下面是一個(gè)簡(jiǎn)單的CSS加載動(dòng)畫(huà)示例：

.loading{
position: relative;
width: 40px;
height: 40px;
}
.loading:before,
.loading:after{
position: absolute;
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #666;
animation: loading 1s ease-in-out infinite;
}
.loading:before{
left: 5px;
animation-delay: -0.32s;
}
.loading:after{
right: 5px;
animation-delay: 0.32s;
}
@keyframes loading{
0%{
transform: scale(0);
opacity: 0.5;
}
50%{
opacity: 1;
}
100%{
transform: scale(1);
opacity: 0.5;
}
}

上述代碼中，我們定義了一個(gè)名為.loading的類(lèi)，其寬和高都為40px。我們使用:before和:after偽元素來(lái)模擬加載中的小球，它們都是一個(gè)10px大小的圓形，顏色為灰色。

我們給這兩個(gè)圓形設(shè)置了一個(gè)名為loading的動(dòng)畫(huà)效果，其中50%的時(shí)間里，小球的透明度變得更高，來(lái)模擬加載中的閃爍效果。我們使用animation-delay屬性來(lái)讓這兩個(gè)小球的動(dòng)畫(huà)錯(cuò)開(kāi)來(lái)，增加運(yùn)動(dòng)的復(fù)雜度。

在HTML中，我們只需要將loading類(lèi)應(yīng)用到需要顯示加載動(dòng)畫(huà)的元素上即可。

<div class="loading"></div>

通過(guò)簡(jiǎn)單的CSS動(dòng)畫(huà)技術(shù)，我們可以實(shí)現(xiàn)各種各樣的加載動(dòng)畫(huà)效果，讓頁(yè)面更加生動(dòng)，吸引用戶的注意力。