資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何使用CSS建立預載入器？
顧名思義，預載入器在網頁載入時載入。可以把它看作是網頁內容可見之前的載入頁面或載入螢幕。使用CSS，我們可以輕鬆建立預載入器，並使用邊框屬性對其進行樣式設定。載入器的動畫使用關鍵幀設定。
設定載入器的樣式
要設定載入器的樣式，可以使用邊框屬性。高度和寬度也已設定 -
.loader {
border: 16px double #ffee00;
border-radius: 50%;
border-top: 16px solid #7434db;
width: 140px;
height: 140px;
-webkit-animation: loader 2s linear infinite; /* Safari */
animation: loader 2s linear infinite;
}
無限動畫載入器
要為載入器設定動畫，我們使用了`animation`屬性。它也適用於Safari網路瀏覽器。動畫的名稱設定為`loader`。為了使其永遠旋轉，設定了無限動畫。我們在下面使用了簡寫動畫屬性。如果未使用簡寫屬性，則使用`animation-iteration-count`設定旋轉 -
webkit-animation: loader 2s linear infinite; /* Safari */ animation: loader 2s linear infinite;
設定載入器動畫
使用`rotate()`方法設定動畫的旋轉。在其中設定旋轉度數。`rotate()`使用CSS的`transform`屬性設定 -
對於0%，度數設定為0度，而對於100%，度數設定為360度 -
@keyframes loader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
針對不支援的網路瀏覽器的載入器動畫
對於不支援動畫和轉換屬性的網路瀏覽器，使用`-webkit-`字首 -
@-webkit-keyframes loader {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
示例
要使用CSS建立預載入器，程式碼如下：
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.loader {
border: 16px double #ffee00;
border-radius: 50%;
border-top: 16px solid #7434db;
width: 140px;
height: 140px;
-webkit-animation: loader 2s linear infinite; /* Safari */
animation: loader 2s linear infinite;
}
@-webkit-keyframes loader {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes loader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<h1>Creating a pre Loader example</h1>
<div class="loader"></div>
</body>
</html>
更新於：2023年12月8日
231 次檢視
廣告