在網(wǎng)頁設(shè)計(jì)中，加載動(dòng)畫可以增強(qiáng)用戶體驗(yàn)。本文將介紹如何使用CSS實(shí)現(xiàn)加載動(dòng)畫。

//HTML結(jié)構(gòu)
<div class="loading">
<div class="loading-circle"></div>
</div>
//CSS樣式
.loading {
width: 100%;
height: 100%;
background-color: #f4f4f4;
position: fixed;
top: 0; left: 0;
}
.loading-circle {
width: 50px;
height: 50px;
border-radius: 50%;
border: 10px solid transparent;
border-top-color: #2db9e9;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
animation: loading-rotate 1.5s infinite linear;
}
@keyframes loading-rotate {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}

上述代碼實(shí)現(xiàn)了一個(gè)加載動(dòng)畫，使用了一個(gè)圓環(huán)和CSS3的動(dòng)畫屬性。我們需要一個(gè)父級元素loading，它可以是整個(gè)頁面或者一個(gè)部分。其子元素loading-circle就是我們的加載動(dòng)畫，我們使它旋轉(zhuǎn)，達(dá)到加載效果。其中，loading-circle使用了定位，位于loading的中央。

使用CSS實(shí)現(xiàn)加載動(dòng)畫的方法很多，我們可以根據(jù)自己的需求進(jìn)行修改和創(chuàng)新。希望本文能對你有所幫助。