CSS Loading動畫的演示與實現

CSS Loading動畫是一種被廣泛應用的網頁動態效果，常用於展示頁面載入狀態或者某些交互操作的展現方式。在本文中，我們將從多個方面對CSS Loading動畫進行詳細的闡述和演示，以及實現一些常見的CSS Loading效果。

一、CSS Loading動畫

CSS Loading動畫的作用是為等待用戶等待過渡提供友好的交互體驗。其中，CSS動畫由多個關鍵幀組成，每個關鍵幀都對應著其在動畫過渡過程中的狀態，通過CSS的屬性改變來模擬一些動態效果。

二、CSS Loading動畫轉動圓圈實現

我們可以通過CSS實現一個簡單的轉動動畫效果：一個圓圈在自行旋轉。

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.loading {
  display: inline-block;
  animation: rotate 1s linear infinite;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-top-color: #e67e22;
}

代碼分析：

代碼中，我們使用了CSS3的@keyframes關鍵幀實現了一個旋轉過渡的動畫效果，將CSS動畫聲明為無限循環。同時，我們創建了一個.loading類，應用於HTML元素上，指定了其高度、寬度、樣式、動畫時間以及圓角等各種屬性。最終生成的效果是一個旋轉的圓圈。

三、CSS Loading動畫蒙層效果實現

另一種較為常見的CSS Loading動畫效果是蒙層效果。該效果在整個頁面的正中央，顯示一個用戶不能操作的蒙層，在蒙層上展示一些正在載入或等待完成的信息。

.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.loader .inner {
  width: 30%;
  height: 30%;
  padding: 2rem;
  background-color: #fff;
  border-radius: 0.5rem;
  text-align: center;
}

代碼分析：

代碼中，我們創建了兩個類loader和inner。其中，loader類作為蒙層元素，將其定位於整個頁面的正中央，包含一個內部元素inner，用於展示用戶等待的信息，統一用白色背景、略帶圓角的外觀設計。loader的z-index屬性較高，用於覆蓋在其他元素之上，防止用戶進行操作。

四、CSS Loading動畫載入狀態展示效果實現

在某些情況下，CSS Loading動畫用於模擬表單提交、數據上傳、視頻播放等等等待用戶完成某項操作的過程。此時，可以將CSS Loading動畫集成到等待用戶完成操作的組件中，顯示組件內部狀態的變化。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/186429.html