當使用者進入一個網頁時，最讓人不耐煩的事情莫過於等待頁面載入。為了緩解使用者的焦慮，許多網站開始採用CSS載入動畫來增加頁面載入的趣味性。在這篇文章中，我們將學習如何使用CSS來製作各種酷炫的載入動畫效果，並提供具體的程式碼範例來幫助您實現。
一、基礎動畫
首先讓我們來製作一些基礎的載入動畫。我們可以用CSS中的animation屬性來創造一個基礎動畫。 animation屬性有幾個子屬性，如下：
現在，讓我們來看幾個不同類型的基礎載入動畫。
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中文網其他相關文章！
