CSS網頁載入動畫：製作各種酷炫的載入動畫效果

當使用者進入一個網頁時，最讓人不耐煩的事情莫過於等待頁面載入。為了緩解使用者的焦慮，許多網站開始採用CSS載入動畫來增加頁面載入的趣味性。在這篇文章中，我們將學習如何使用CSS來製作各種酷炫的載入動畫效果，並提供具體的程式碼範例來幫助您實現。

一、基礎動畫

首先讓我們來製作一些基礎的載入動畫。我們可以用CSS中的animation屬性來創造一個基礎動畫。 animation屬性有幾個子屬性，如下：

• animation-name：選擇要套用的關鍵影格（keyframe）規則的名稱。
• animation-duration：定義一個週期的持續時間（單位為秒或毫秒）。
• animation-timing-function：定義一個週期的速度曲線。
• animation-delay：定義一個週期的延遲時間。
• animation-iteration-count：定義動畫該播放的次數。

現在，讓我們來看幾個不同類型的基礎載入動畫。

1、旋轉動畫

在這個載入動畫中，我們使用以下程式碼來定義一個旋轉的關鍵影格：

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

上述程式碼使用了@keyframes規則來定義一個名為「rotate」的關鍵影格。在這個關鍵影格中，我們使用了transform屬性來定義旋轉。在from和to中，我們定義了旋轉的度數，從0到360度。

接下來，我們需要為我們的「loader」元素指定此動畫：

.loader {
  animation-name: rotate;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

2、閃爍動畫

#在這個載入動畫中，我們使用以下程式碼來定義一個循環閃爍的關鍵影格：

@keyframes blink {
  50% {
    opacity: 0.5;
  }
}

上述程式碼使用了@keyframes規則來定義一個名為「blink」的關鍵影格。在這個關鍵影格中，我們使用opacity屬性來定義元素的透明度。在50%位置，我們將其設為0.5，這樣可以使其在兩個狀態之間循環閃爍。

要將此動畫套用到我們的「loader」元素，請使用以下程式碼：

.loader {
  animation-name: blink;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

二、進階動畫

現在，我們已經學習如何在CSS中創建基礎的載入動畫，讓我們進一步探索如何創建更高級的動畫。以下是一些酷炫的載入動畫及其程式碼範例。

1、波形動畫

在這個載入動畫中，我們使用以下程式碼來定義一個波模式的關鍵影格：

@keyframes wave {
  0% {
    transform: translateX(0) translateY(0);
  }
  
  50% {
    transform: translateX(30px) translateY(15px);
  }
  
  100% {
    transform: translateX(0) translateY(0);
  }
}

在上述程式碼中，我們使用transform屬性來製作波形效果。在0%和100%位置，我們將元素設定為其初始位置。在50%位置，我們使用translateX（水平平移）和translateY（垂直平移）來建立波形。

接下來，我們為我們的「loader」元素指定此動畫：

.loader {
  animation-name: wave;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

2、擴散動畫

在這個載入動畫中，我們使用以下程式碼來定義一個擴散的關鍵幀：

@keyframes spread {
  0% {
    transform: scale(0);
    opacity: 0.5;
  }
  
  50% {
    transform: scale(1);
    opacity: 0.1;
  }
  
  100% {
    transform: scale(0);
    opacity: 0.5;
  }
}

在上述程式碼中，我們使用transform屬性來製作擴散效果。在0%和100%位置，我們將元素設定為其最小化和透明度的初始值。在50%位置，我們使用scale屬性（縮放）來創建擴散動畫。

接下來，我們為我們的「loader」元素指定此動畫：

.loader {
  animation-name: spread;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

總結

透過使用CSS，我們可以為網站創建各種類型的載入動畫。這些載入動畫可以增加頁面載入的趣味性，緩解用戶的等待焦慮。在本文中，我們學習如何創建一些基礎的載入動畫，以及如何製作更進階的動畫。希望這些程式碼範例對您的工作有所幫助。

以上是CSS網頁載入動畫：製作各種酷炫的載入動畫效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！