您好,登錄后才能下訂單哦!
這篇文章主要介紹了CSS如何實(shí)現(xiàn)一個(gè)簡(jiǎn)單的Loading效果的相關(guān)知識(shí),內(nèi)容詳細(xì)易懂,操作簡(jiǎn)單快捷,具有一定借鑒價(jià)值,相信大家閱讀完這篇CSS如何實(shí)現(xiàn)一個(gè)簡(jiǎn)單的Loading效果文章都會(huì)有所收獲,下面我們一起來(lái)看看吧。
1.使用Animation動(dòng)畫實(shí)現(xiàn)Loading
Animation是CSS3新增的一個(gè)模塊,它可以用來(lái)創(chuàng)建非常復(fù)雜的動(dòng)畫效果。這里我們通過(guò)Animation來(lái)創(chuàng)建一個(gè)Loading的效果。
首先在HTML中添加一個(gè)用于Loading效果的容器:
<div class="loading"> <div class="loading-circle"></div> <div class="loading-circle"></div> <div class="loading-circle"></div> </div>
接下來(lái),在CSS中定義一個(gè)關(guān)鍵幀動(dòng)畫,用于旋轉(zhuǎn)“圓圈”。
@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
然后為.loading-circle類設(shè)置樣式,使其成為一個(gè)圓形,并在其中使用上述定義的動(dòng)畫。
.loading-circle { width: 20px; height: 20px; border-radius: 50%; background-color: #333; margin: 0 10px; animation: rotate 1.5s ease-in-out infinite; }
最后,在.css-loading中設(shè)置容器的樣式,使其居中于頁(yè)面,并適當(dāng)調(diào)整“圓圈”的位置和大小。
.loading { display: flex; justify-content: center; align-items: center; } .loading-circle:nth-child(1) { transform: translateY(-30px); } .loading-circle:nth-child(2) { transform: translateY(30px); }
完整的實(shí)現(xiàn)代碼如下:
@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loading-circle { width: 20px; height: 20px; border-radius: 50%; background-color: #333; margin: 0 10px; animation: rotate 1.5s ease-in-out infinite; } .loading { display: flex; justify-content: center; align-items: center; } .loading-circle:nth-child(1) { transform: translateY(-30px); } .loading-circle:nth-child(2) { transform: translateY(30px); }
2.使用Transition過(guò)渡實(shí)現(xiàn)Loading
除了Animation之外,我們還可以使用CSS中的Transition來(lái)實(shí)現(xiàn)Loading效果。
我們同樣在HTML中添加一個(gè)容器作為L(zhǎng)oading的展示區(qū)域:
<div class="loading-2"> <div class="loading-circle-2"></div> <div class="loading-circle-2"></div> <div class="loading-circle-2"></div> </div>
在CSS中,我們?yōu)?loading-circle-2類定義了初始狀態(tài)和最終狀態(tài),并使用Transition來(lái)實(shí)現(xiàn)狀態(tài)之間的平滑過(guò)渡。
.loading-circle-2 { width: 20px; height: 20px; border-radius: 50%; background-color: #333; margin: 0 10px; transform: scale(0); transition: transform 0.5s ease 0.2s; } .loading-2 .loading-circle-2:nth-child(1) { animation: delay 0.2s linear infinite; } .loading-2 .loading-circle-2:nth-child(2) { animation: delay 0.3s linear infinite; } .loading-2 .loading-circle-2:nth-child(3) { animation: delay 0.4s linear infinite; } @keyframes delay { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }
最后,我們?cè)?loading-2元素上設(shè)置樣式,使其居中于頁(yè)面。
完整的實(shí)現(xiàn)代碼如下:
.loading-circle-2 { width: 20px; height: 20px; border-radius: 50%; background-color: #333; margin: 0 10px; transform: scale(0); transition: transform 0.5s ease 0.2s; } .loading-2 .loading-circle-2:nth-child(1) { animation: delay 0.2s linear infinite; } .loading-2 .loading-circle-2:nth-child(2) { animation: delay 0.3s linear infinite; } .loading-2 .loading-circle-2:nth-child(3) { animation: delay 0.4s linear infinite; } @keyframes delay { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } } .loading-2 { display: flex; justify-content: center; align-items: center; }
關(guān)于“CSS如何實(shí)現(xiàn)一個(gè)簡(jiǎn)單的Loading效果”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對(duì)“CSS如何實(shí)現(xiàn)一個(gè)簡(jiǎn)單的Loading效果”知識(shí)都有一定的了解,大家如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。