在前端開發中，Loading是一個非常常見的功能。當網頁資料載入時，我們希望能夠在使用者等待的同時，給其一個視覺上的回饋，來增強使用者體驗。在這篇文章中，我們將透過CSS來實現一個簡單的Loading效果。
1.使用Animation動畫實作Loading
Animation是CSS3新增的一個模組，它可以用來創造非常複雜的動畫效果。這裡我們透過Animation來創造一個Loading的效果。
首先在HTML中加入一個用於Loading效果的容器：
<div class="loading"> <div class="loading-circle"></div> <div class="loading-circle"></div> <div class="loading-circle"></div> </div>
接下來，在CSS中定義一個關鍵影格動畫，用於旋轉「圓圈」。
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}然後為.loading-circle類別設定樣式，使其成為一個圓形，並在其中使用上述定義的動畫。
.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中設定容器的樣式，使其居中於頁面，並適當調整「圓圈」的位置和大小。
.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);
}完整的實作程式碼如下：
@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過渡實作Loading
除了Animation之外，我們還可以使用CSS中的Transition來實現Loading效果。
我們同樣在HTML中加入一個容器作為Loading的展示區域：
<div class="loading-2"> <div class="loading-circle-2"></div> <div class="loading-circle-2"></div> <div class="loading-circle-2"></div> </div>
在CSS中，我們為.loading-circle-2類別定義了初始狀態和最終狀態，並使用Transition來實現狀態之間的平滑過渡。
.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元素上設定樣式，使其居中於頁面。
完整的實作程式碼如下：
.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;
}3.總結
本文透過兩種不同的方法展示如何使用CSS來實現Loading效果。 Animation雖然相對複雜，但是它能夠創造非常豐富多樣的動畫效果。而Transition則更為簡潔易懂，能夠實現一些簡單的動畫。
整體來說，使用CSS來實現Loading是一種相對簡單的方式，它可以有效提高使用者的體驗。當然，在實際開發中，我們可能還需要根據專案的實際需求進行一些調整和樣式最佳化。
以上是CSS要怎麼實作一個簡單的Loading效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
